大概是這樣的，現(xiàn)在需要根據(jù)一下上傳的圖片以及一些輸入生成圖片。本來打算用imagemagick的，但是后來覺得這樣前后端要搞兩份不同的代碼，然后imagemagick使用起來遠(yuǎn)沒有canvas用起來順手啊。So，最終決定就用Canvas搞定它了，然后通過toDataURL將圖片的base64編碼傳回后端再保存。下面直接上代碼。

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

// 參見[Drawing_DOM_objects_into_a_canvas][1]

function drawHtmlToCanvas() {

var data = "" +

"" +

"

" +

"I like cheese" +

"

" +

"" +

"";

var DOMURL = self.URL || self.webkitURL || self;

var img = new Image();

var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});

var url = DOMURL.createObjectURL(svg);

img.onload = function() {

ctx.drawImage(img, 0, 0);

DOMURL.revokeObjectURL(url);

// chrome版本不支持，目前只支持firefox

console.log(canvas.toDataURL());

};

img.src = url;

}

function drawCrossOriginImg2Canvas(callback) {

var img = new Image();

// toDataURL存在跨域問題，參見[CORS Enabled Image][2]，此處的圖片服務(wù)器要支持Access-Control-Allow-Origin

img.crossOrigin = "Anonymous";

img.src = document.getElementById('pic').src;

img.onload = function(){

ctx.drawImage(img, 0, 0);

callback && callback();

// chrome&firefox 都OK

console.log(canvas.toDataURL());

}

}

drawCrossOriginImg2Canvas(drawHtmlToCanvas);

有疑問的是問什么chrome為何對(duì)于blob:不支持toDataURL()

總結(jié)

以上是生活随笔為你收集整理的html如何在画布上加层,在Canvas中嵌套Html的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。