var srcX = oMark.offsetLeft * Rwidth;
var srcY = oMark.offsetTop * Rheight;
var sWidth = oMark.offsetWidth * Rwidth;
var sHeight = oMark.offsetHeight * Rheight;
var dataImg = cxt1.getImageData(srcX, srcY, sWidth, sHeight); // --第二步-- getImageData() 复制原图画布上指定矩形的像素数据
canvas2.width = sWidth;
canvas2.height = sHeight;
cxt2.putImageData(dataImg, 0, 0, 0, 0, canvas2.width, canvas2.height); // --第三步-- 通过 putImageData() 将原图图像数据放到canvas2画布中
var img2 = canvas2.toDataURL("image/png"); // --第四步-- toDataURL()将canvas2画布保存为图像
var cxt3 = canvas3.getContext("2d"); // getContext() 方法返回一个用于在画布上绘图的环境
var img3 = new Image(); // 创建图像对象
img3.crossOrigin = ''; // 图像跨域设置
img3.src = img2; // 设置图像地址
img3.onload = function () { // onload内可以获取图像信息
cxt3.drawImage(img3, 0, 0, canvas3.width, canvas3.height) // --第五步-- 将canvas2画布生成的图像放在canvas3画布中
};
resolve();
}
})
},
到此这篇关于vue下canvas裁剪图片实例讲解的文章就介绍到这了,更多相关vue下canvas裁剪图片内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
