如何解决Canvas setTransform() 剪切图像
我正在制作一个数字绘图工具,它使用 setTransform()
函数来扭曲/扭曲用户绘制的给定数字并下载它们。目前,在画布上绘制新图像之前,图像似乎还没有被清除出框架。
这是我的意思的一个例子:
目标:
这里是操作图片和下载相关的代码:
function save(number) {
for(let i = -0.2; i <= 0.2; i += 0.05) {
for(let j = -0.2; j <= 0.2; j += 0.05) {
for(let k = 0.9; k <= 1.05; k += 0.05){
for(let l = 0.9; l <= 1.05; l += 0.05){
temp2canvas.getContext('2d').setTransform(k,i,j,l,0);
temp2canvas.getContext('2d').clearRect(0,temp2canvas.width,temp2canvas.height);
tempcanvas.getContext('2d').clearRect(0,tempcanvas.width,tempcanvas.height);
document.getElementById("canvasimg").style.border = "2px solid";
temp2canvas.getContext('2d').drawImage(canvas,canvas.width,canvas.height,10,102,102);
tempcanvas.getContext('2d').drawImage(temp2canvas,temp2canvas.height,28,28);
var dataURL = tempcanvas.toDataURL();
document.getElementById("canvasimg").src = dataURL;
zip.file(number + "\\" + count + ".png",document.getElementById("canvasimg").src.replace(/^data:image\/(png|jpg);base64,/,""),{base64: true});
count++;
}
}
}
}
}
function done() {
zip.generateAsync({type:"blob"})
.then(function(blob) {
saveAs(blob,"data.zip");
});
}
我使用 JSZip 和 FileSaver.js 库将文件保存为 zip 文件并下载。
怎么了?
解决方法
当您调用 clearRect()
时,转换仍处于活动状态,因此清除矩形本身已转换,可能不会覆盖画布的整个区域。
在清除画布之前简单地将变换矩阵重置为单位矩阵:
function save(number) {
const ctx = temp2canvas.getContext('2d');
ctx.font = "20px sans-serif";
for(let i = -0.2; i <= 0.2; i += 0.05) {
for(let j = -0.2; j <= 0.2; j += 0.05) {
for(let k = 0.9; k <= 1.05; k += 0.05){
for(let l = 0.9; l <= 1.05; l += 0.05){
// reset to identity matrix
ctx.setTransform(1,1,0);
// clear everything
ctx.clearRect(0,temp2canvas.width,temp2canvas.height);
// now set the new matrix
ctx.setTransform(k,i,j,l,0);
ctx.fillText( number,20,20 );
temp2canvas.toBlob((blob) => {
document.body.appendChild(new Image())
.src = URL.createObjectURL( blob );
});
}
}
}
}
}
save(1);
<canvas id="temp2canvas" width="50" height="50"></canvas><br>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。