HTML 5はcanvasを利用して複数の図を1枚の画像に統合する
3277 ワード
需要分析では、現在のページのいくつかの画像に基づいて、携帯電話で長押しして、写真をアルバムに保存したり、友达に送ったりします.
呼び出し方法:
注意:上の呼び出しはvue構文を使用します.
参照先: canvasを利用して、複数の図を1枚の画像 に統合する.
html 2 canvasに基づいてWebページを画像として保存し、画像の解像度を最適化するを実現する. canvasを画像としてエクスポートし、JSで をダウンロードします. jsスクリーンショットおよびサーバ画像を迂回してローカル(html 2 canvas) に保存
drawCanvas(){
var self = this;
var imgsrcArray = [
require('@/page/agent/agentexpand/img/bg.jpg'),
'data:image/jpeg;base64,'+this.codeUrl
];
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 750;
canvas.height = 1333;
var imglen = imgsrcArray.length;
var drawimg = (function f(n){
if(n < imglen){
var img = new Image();
img.crossOrigin = 'Anonymous'; //
img.onload = function(){
//ctx.save();
if(n == 0){
ctx.drawImage(img,0,0,750,1333);
}else{
ctx.drawImage(img,466,574,210,210);
}
f(n+1);
}
img.src = imgsrcArray[n];
}else{
self.downloadUrl = canvas.toDataURL("image/jpeg");
self.downloadUrl = self.downloadUrl.replace("data:image/jpeg;base64,", "");
}
})(0);
}
呼び出し方法:
<img :src="'data:image/jpeg;base64,' + downloadUrl"/>
注意:上の呼び出しはvue構文を使用します.
参照先:
html 2 canvasに基づいてWebページを画像として保存し、画像の解像度を最適化するを実現する.