emptytouchcanvas0 评论 15 阅读前天 15:46:57 举报
我们在做使用原生 canvas 截图时, 有时会出现截取出来的图像是黑色的, 那是因为图片未加载完成就绘制到画布上进行截取
这里就需要进行图片是否加载完成的判断, 以下代码是进行多张图片是否加载完成的判断, 并绘制到画布上
代码:
- function createCanvas() {
- var aCanvas = document.createElement("canvas");
- var ctx = aCanvas.getContext('2d');
- var imgBase64 = "";
- aCanvas.width = 500;
- aCanvas.height = 500;
- var img_0 = new Image(),
- img_1 = new Image(),
- img_2 = new Image(),
- img_3 = new Image(),
- img_4 = new Image(),
- img_5 = new Image();
img_0.src = 图片 1;
img_1.src = 图片 2;
img_2.src = 图片 3;
img_3.src = 图片 4;
img_4.src = 图片 5;
- var imgArr = [img_0, img_1, img_2, img_3, img_4];
- var progress = 0;
- for (var i = 0,
- len = imgArr.length; i < len; i++) { (function(i) {
- imgArr[i].onload = function() {
- if (this.complete) {
- progress += 20;
- if (progress == 20 * imgArr.length) { // 所有图片都已加载完成
- drawImg(img_0);
- drawImg(img_1);
- drawImg(img_2);
- drawImg(img_3);
- drawImg(img_4);
- setTimeout(function() {
- imgBase64 = aCanvas.toDataURL("image/png"); // 进行截取
- $(".imgContainer")[0].src = imgBase64; // 显示到页面
- },
- 500);
- }
- }
- };
- })(i);
- }
- }
- // 绘制
- function drawImg(img) {
- ctx.drawImage(img, 0, 0, aCanvas.width, aCanvas.height);
- }
来源: http://www.qdfuns.com/note/30577/1b917d7f32846046d9963ed388ec3d94.html