| 
						
						
							
								
							
						
						
					 | 
				
				 | 
				
					@ -93,6 +93,7 @@ | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                </div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					            </div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        </div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        <canvas id="myCanvas"></canvas> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    </div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					</template> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
	
		
			
				
					| 
						
							
								
							
						
						
							
								
							
						
						
					 | 
				
				 | 
				
					@ -153,6 +154,27 @@ export default { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        }; | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    }, | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    created() { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        // 获取canvas元素 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        // this.$nextTick(() => { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        //     let canvas = document.getElementById('myCanvas'); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        //     let ctx = canvas.getContext('2d'); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        //     // 创建一个新的图片对象 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        //     let img = new Image(); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        //     // 设置图片的源地址 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        //     img.src = this.cutImgSrc | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        //     // 当图片加载完成时,执行此函数 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        //     img.onload = function () { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        //         canvas.width = img.width; | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        //         canvas.height = img.height; | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        //         // 在画布上绘制图片 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        //         console.log('img.width,img.height', img.width, img.height) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        //         ctx.drawImage(img, 0, 0); // 参数:图片对象,x坐标,y坐标 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        //     }; | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        // }) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    }, | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    mounted() { | 
				
			
			
		
	
	
		
			
				
					| 
						
							
								
							
						
						
							
								
							
						
						
					 | 
				
				 | 
				
					@ -312,6 +334,73 @@ export default { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        }, | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        convertImageToBase64: function (url) { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					            return new Promise((resolve, reject) => { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                fetch(url, { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    method: 'GET', | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    // mode: 'no-cors', | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    // headers: { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    //     'Content-Type': 'application/json', // 确保这是服务器期望的格式 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    //     'Authorization': 'Bearer ' + token, | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    //     'Access-Control-Allow-Origin': '*' | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    // } | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                }) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    .then(response => { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        if (!response.ok) { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                            console.log('response',response) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                            throw new Error('Network response was not ok ' + response.statusText); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        } | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        return response.blob() | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    }) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    .then(blob => createImageBitmap(blob)) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    .then(imageBitmap => { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        const canvas = document.createElement('canvas'); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        const ctx = canvas.getContext('2d'); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        canvas.width = imageBitmap.width; | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        canvas.height = imageBitmap.height; | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        ctx.drawImage(imageBitmap, 0, 0); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        const dataUrl = canvas.toDataURL('image/png'); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        console.log('dataUrl', dataUrl) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        resolve(dataUrl) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    }) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    .catch(err => { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        reject(err) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    }) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					            }) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        }, | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        convertImageToBase641: function (url) { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					            this.$nextTick(() => { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                return new Promise((resolve, reject) => { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    let canvas = document.getElementById('myCanvas'); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    let ctx = canvas.getContext('2d'); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    // 创建一个新的图片对象 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    let img = new Image(); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    // 设置跨域访问 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    // img.crossOrigin = 'Anonymous'; | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    // 设置图片的源地址 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    img.src = url | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    // 当图片加载完成时,执行此函数 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    img.onload = function () { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        canvas.width = img.width; | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        canvas.height = img.height; | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        // 在画布上绘制图片 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        console.log('img.width,img.height', img.width, img.height) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        ctx.drawImage(img, 0, 0); // 参数:图片对象,x坐标,y坐标 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        let dataURL = canvas.toDataURL('image/png'); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        console.log('dataURL', dataURL) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                        resolve(dataURL); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    }; | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                }) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					            }) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        }, | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        convertImageToBase642: function (url) { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					            return new Promise((resolve, reject) => { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                // 创建新的Image对象 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                const img = new Image(); | 
				
			
			
		
	
	
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
				
				 | 
				
					@ -320,7 +409,8 @@ export default { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                // 图片加载完成 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                img.onload = () => { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    // 创建canvas元素 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    const canvas = document.createElement('canvas'); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    // const canvas = document.createElement('canvas'); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    const canvas = document.getElementById('myCanvas') | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    const ctx = canvas.getContext('2d'); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    // 设置canvas宽高 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					                    canvas.width = img.width; | 
				
			
			
		
	
	
		
			
				
					| 
						
							
								
							
						
						
						
					 | 
				
				 | 
				
					
  |