[英]html2canvas border radius not applying to img tag
需要帮助,当我通过CSS将边界半径应用于imgae时,渲染不正确,渲染的图像应该是相同的预览图像。 我使用html2canvas将div转换为图像。
所附图像供参考,第一个是带边框半径的普通预览,第二个是不带边框半径的普通预览。
<div id="mydiv">
<img src="1.jpg" />
<p>text!</p>
</div>
<p>Generated image</p>
<div id="image">
<p>Image:</p>
</div>
的CSS
<style>
#mydiv {
width: 300px;
height: 200px;
background:#000;
}
#mydiv img {
width: 200px;
height: 200px;
border-radius:100%;
}
</style>
js
html2canvas([document.getElementById('mydiv')], {
onrendered: function (canvas) {
//document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
// AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
}
});
这是一个未解决的错误(已报告该问题):
http://github.com/niklasvh/html2canvas/issues/346
您可以将画布的剪切功能用作解决方法。
演示: http : //jsfiddle.net/m1erickson/8wL2q/
使用剪切区域而不是边界半径的示例代码:
// save the context in its unaltered state
ctx.save();
// fill canvas with black
ctx.fillStyle="black";
ctx.fillRect(0,0,canvas.width,canvas.height);
// create clipping region which will display portion of image
// The image will only be visible inside the circular clipping path
ctx.beginPath();
ctx.arc(100,100,100,0,Math.PI*2);
ctx.closePath();
ctx.clip();
// draw the image into the clipping region
ctx.drawImage(img,0,0);
// restore the context to its unaltered state
ctx.restore();
您可以通过CSS实现此操作
.imageContainer{width: 400px; height: 300px; background-color:#000000;}
.imageDiv{width:200px;height:200px;background-size:cover;display:block;border-radius: 50%;-webkit-border-radius: 50%; -moz-border-radius: 50%;}
<div class="imageContainer">
<div class="imageDiv" style="background-image:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSD_lM5QOQ8JOhruhMB2pA_m5YvikpEoo_KOKB4zaajQIsaPBh1')">
</div>
</div
使用border: solid windowtext 1.0pt;
而不是border:1px solid #fff;
在CSS
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.