随风飘扬
随风飘扬
  • 发布:2021-10-22 16:31
  • 更新:2021-10-25 17:15
  • 阅读:499

【报Bug】canvas生成海报问题

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: window 10

浏览器平台: 微信内置浏览器

浏览器版本: 微信版本8.0.15

项目创建方式: CLI

CLI版本号: "@vue/cli-service": "~4.5.0",

App下载地址或H5⽹址: 需要试验时可联系我临时更新测试

示例代码:
<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>

操作步骤:

同示例代码

预期结果:

微信浏览器内、手机自带浏览器能正常生成图片

实际结果:

实际目前结果微信浏览器内、手机自带浏览器报跨域了

bug描述:

使用 uni.getImageInfo 处理过的图片,能够正常话进canvas里面,但是在H5端,使用 uni.canvasToTempFilePath 把canvas转化为图片时,确报跨域问题

SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

测试结果

本地在chrome浏览器下模拟手机访问测试是正常的,可以正常生成图片,在微信内置浏览器访问、手机自带浏览器访问在保存海报生成图片的时候却报跨域问题

2021-10-22 16:31 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

图像是否允许了跨域访问?

  • 随风飘扬 (作者)

    图片是允许跨域的,图片没允许跨域之前,浏览器端模拟手机测试也会报错


    2021-10-26 11:52

该问题目前已经被锁定, 无法添加新回复