<template>
<view>
<view class="aaaa" @click="addCanvas">点击生成海报</view>
<view class="aaaa" @click="saveCanvas">点击保存海报</view>
<canvas style="width: 300px; height: 300px;" canvas-id="firstCanvas"></canvas>
<image :src="image" v-if="image" width="300" height="300"></image>
</view>
</template>
<style>
.aaaa {
height: 40px;
margin-bottom: 20px;
background-color: blue;
color: #fff;
}
</style>
<script type="text/javascript">
export default {
data () {
return {
ctx: null,
image: null
}
},
mounted () {
this.ctx = uni.createCanvasContext('firstCanvas', this)
},
methods: {
// 读取图片信息
setImg (img) {
return new Promise ( (resolve, reject) => {
uni.getImageInfo({
src: img.url,
success: function(image) {
resolve(image)
},
fail: function(err) {
console.log(err,'获取图片错误')
reject(err)
}
});
})
},
addCanvas () {
const _this = this;
_this.setImg({
url: 'https://img.trlpw.com/images/common/2021/10/11/202110116163b74541444.png'
}).then ((avatar) => {
console.log(avatar)
_this.ctx.drawImage(avatar.path, 0, 0, 300, 300)
_this.ctx.draw();
})
},
saveCanvas () {
const _this = this
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: 300,
height: 300,
destWidth: 300,
destHeight: 300,
fileType: 'jpg',
canvasId: 'firstCanvas',
success: function(res) {
console.log(res)
_this.image = res.tempFilePath
},
fail: function(err) {
uni.showToast({
title: `海报生成失败,${err.errMsg}`,
icon: 'none'
})
},
complete: function() {
uni.hideLoading();
}
}, this)
}
}
}
</script>
- 发布:2021-10-22 16:31
- 更新:2021-10-25 17:15
- 阅读:602
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: window 10
浏览器平台: 微信内置浏览器
浏览器版本: 微信版本8.0.15
项目创建方式: CLI
CLI版本号: "@vue/cli-service": "~4.5.0",
App下载地址或H5⽹址: 需要试验时可联系我临时更新测试
示例代码:
操作步骤:
同示例代码
同示例代码
预期结果:
微信浏览器内、手机自带浏览器能正常生成图片
微信浏览器内、手机自带浏览器能正常生成图片
实际结果:
实际目前结果微信浏览器内、手机自带浏览器报跨域了
实际目前结果微信浏览器内、手机自带浏览器报跨域了
bug描述:
使用 uni.getImageInfo 处理过的图片,能够正常话进canvas里面,但是在H5端,使用 uni.canvasToTempFilePath 把canvas转化为图片时,确报跨域问题
SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
测试结果
本地在chrome浏览器下模拟手机访问测试是正常的,可以正常生成图片,在微信内置浏览器访问、手机自带浏览器访问在保存海报生成图片的时候却报跨域问题
随风飘扬 (作者)
图片是允许跨域的,图片没允许跨域之前,浏览器端模拟手机测试也会报错
2021-10-26 11:52