|
@@ -1,11 +1,17 @@
|
|
|
import imgList from './images/logoWatermark.png'
|
|
|
export const imgToCanvas = async (url: string) => {
|
|
|
- console.log('imgToCanvas',url)
|
|
|
+ console.log('imgToCanvas', url)
|
|
|
const img = document.createElement('img')
|
|
|
img.setAttribute('crossOrigin', 'anonymous')
|
|
|
- img.src = url+`?${new Date().getTime()}`
|
|
|
+ // img.src = url+`?${new Date().getTime()}`
|
|
|
+ // 为了处理base64 和 连接加载不同的
|
|
|
+ if (url && typeof url == 'string' && url.includes('data:image')) {
|
|
|
+ img.src = url
|
|
|
+ } else {
|
|
|
+ img.src = url + `?${new Date().getTime()}`
|
|
|
+ }
|
|
|
|
|
|
- // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
|
|
|
+ // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
|
|
|
|
|
|
await new Promise(resolve => (img.onload = resolve))
|
|
|
|
|
@@ -40,16 +46,22 @@ export const addWatermark = async (canvas, text) => {
|
|
|
const img = document.createElement('img')
|
|
|
img.setAttribute('crossOrigin', 'anonymous')
|
|
|
|
|
|
- img.src = imgList+`?${new Date().getTime()}`
|
|
|
+ // img.src = imgList + `?${new Date().getTime()}`
|
|
|
+ // 为了处理base64 和 连接加载不同的
|
|
|
+ if (imgList && typeof imgList == 'string' && imgList.includes('data:image')) {
|
|
|
+ img.src = imgList
|
|
|
+ } else {
|
|
|
+ img.src = imgList + `?${new Date().getTime()}`
|
|
|
+ }
|
|
|
|
|
|
- // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
|
|
|
+ // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
|
|
|
await new Promise(resolve => (img.onload = resolve))
|
|
|
|
|
|
// 创建canvas DOM元素,并设置其宽高和图片一样
|
|
|
|
|
|
const water = document.createElement('canvas')
|
|
|
water.width = 600
|
|
|
- water.height =500
|
|
|
+ water.height = 500
|
|
|
// 小水印画布大小
|
|
|
// water.width = 444
|
|
|
// water.height = 141
|