<img :src="erweimaUrl" @load="downloadImg"/>
//后台得到图片进行展示
斜体样式
var app = new Vue({
el: '#app',
data: {
erweimaUrl:'',//后台得到的图片地址
urling:''
},
mounted() {
that.erweimaUrl=res.data.code_url+ "?time=" + new Date().getTime();//从后台得到的图片地址,进行转化
},
computed: {
},
methods: {
down:function(){
this.downloadImg();
console.log(123)
},
downloadImg: function(index) {
var shareContent = mui(".downL")[0]; //需要截图的包裹的(原生的)DOM 对象
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 4; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
var opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
logging: false, //日志开关
width: width, //dom 原始宽度
height: height, //dom 原始高度
useCORS: true,
taintTest: true
};
html2canvas(shareContent, opts).then(function(canvas) {
var url = canvas.toDataURL("image/png");
app.urling=url
app.base64url = url.split(",")[1];
});
},
//保存海报到相册
saveKeep: function() {
if (!this.base64url) {
return;
}
if (mui.os.ios) {
window.webkit.messageHandlers.saveBase64ToPicture.postMessage(this.base64url);
} else if (mui.os.android) {
window.android.saveBase64ToPicture(this.base64url);
}
},
//分享海报
share: function() {
if (!this.base64url) {
mui.toast("正在生成海报图片,请稍后重试!")
return;
}
data = {
shareIcon: this.base64url,
shareType: 6,
mediaType: 2
}
if (mui.os.android) {
var data = JSON.stringify(data);
window.android.toShare(data);
} else if (mui.os.ios) {
window.webkit.messageHandlers.toShare.postMessage(data);
}
},
}
})