Javascript Canvas.toDataURL（）受污染的画布可能无法导出

我正在尝试使用javascript、html、css创建一个页面，我可以通过在线链接调整图像大小。但是，在调整大小时，我遇到了一个错误，即使用

Canvas.toDataURL（）

时可能无法导出受污染的画布。我在谷歌和这里搜索了这个问题。有人建议将照片的交叉源改为匿名或“*”。两种方法我都试过，但都不管用。我想知道是否有人能提供帮助。我的代码在下面的链接中

var min\u img\u width=60；
var min_img_height=60；
var max_img_width=1000；
var max_img_height=1000；
var resizeableImage=函数（图像\目标）{
//一些变量和设置
var$container，
orig_src=新图像（），
image\u target=$（image\u target）.get（0），
事件状态={}，
约束=假，
min_width=min_img_width，//根据需要更改
最小高度=最小高度，
max\u width=max\u img\u width，//根据需要更改
最大高度=最大高度，
调整画布大小=document.createElement（'canvas'），
//----------------用于对页面进行整型的函数----------------------//
init=函数（）{
//调整大小时，我们将始终使用原始文件的此副本作为基础
orig_src.src=image_target.src；
orig_src.crossorigin='匿名'；
//使用容器包装图像并添加大小调整手柄
$（图像\目标）。换行（“”）
.之前（“”）
.之前（“”）
.在（“”）之后
.在（''）之后；
//将容器分配给变量
$container=$（image_target）.parent（'.resize container'）；
//添加事件（一个用于调整大小（调整手柄大小）和一个用于移动-img）
//addEventListenor->鼠标触地，调整手柄大小，调整图片大小
$container.on（'mousedown touchstart'，'.resize handle'，startResize）；
};
//--------------结束对页面进行整型的函数-------------------------//
//在触发事件时保存数据的步骤
saveEventState=函数（e）{
//保存初始事件详细信息和容器状态
event_state.container_width=$container.width（）；
event_state.container_height=$container.height（）；
event_state.container_left=$container.offset（）.left；
event_state.container_top=$container.offset（）.top；
event_state.mouse_x=（e.clientX | | | e.pageX | | e.originalEvent.touch[0]。clientX）+$（window.scrollLeft（）；
event_state.mouse_y=（e.clientY | | | e.pageY | | e.originalEvent.touch[0].clientY）+$（window.scrollTop（）；
//这是对mobile safari的修复
//由于某些原因，它不允许直接复制Touchs属性
if（e.originalEvent.touchs的类型！=“未定义”）{
event_state.touchs=[]；
$.each（e.originalEvent.touch，function（i，ob）{
事件_state.touch[i]={}；
event_state.touch[i].clientX=0+ob.clientX；
event_state.touch[i].clientY=0+ob.clientY；
});
}
事件_state.evnt=e；
};
//函数根据宽度和高度重新绘制图像
重绘图像=函数（宽度、高度）{
调整画布的大小。宽度=宽度；
调整画布大小。高度=高度；
调整画布的大小。getContext（'2d'）。drawImage（原图，0，0，宽度，高度）；
$（image\u target.attr（'src'，resize\u canvas.toDataURL（“image/png”）；
};
//------------------------调整大小功能启动----------------------------//
startResize=函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
保存事件状态（e）；
$（文档）.on（'mousemove touchmove'，调整大小）；
$（document）.on（'mouseup touchend'，endResize）；
};
endResize=函数（e）{
e、 预防默认值（）；
$（document）.off（'mouseup touchend'，endResize）；
$（document）.off（'mousemove touchmove'，调整大小）；
};
调整大小=功能（e）{
var mouse={}，width，height，left，top，offset=$container.offset（）；
mouse.x=（e.clientX | | e.pageX | | | e.originalEvent.touch[0].clientX）+$（window.scrollLeft（）；
mouse.y=（e.clientY | | e.pageY | | e.originalEvent.touchs[0].clientY）+$（window.scrollTop（）；
//根据拖动的角点和约束，以不同的方式定位图像
if（$（event_state.evnt.target）.hasClass（'resize-handle-se'））{
宽度=mouse.x-event_state.container_left；
高度=mouse.y-event\u state.container\u top；
左=事件\状态。容器\左；
top=事件\状态。容器\顶部；
}else if（$（event_state.evnt.target）.hasClass（'resize-handle-sw'））{
宽度=事件\状态.container\宽度-（mouse.x-事件\状态.container\左侧）；
高度=mouse.y-event\u state.container\u top；
左=鼠标.x；
top=事件\状态。容器\顶部；
}else if（$（event_state.evnt.target）.hasClass（'resize-handle-nw'））{
宽度=事件\状态.container\宽度-（mouse.x-事件\状态.container\左侧）；
高度=事件状态.容器高度-（mouse.y-事件状态.容器顶部）；
左=鼠标.x；
top=mouse.y；
if（约束| | e.shiftKey）{
top=鼠标.y-（（宽度/原点位置宽度*原点位置高度）-高度）；
}
}else if（$（event_state.evnt.target）.hasClass（'resize-handle-ne'））{
宽度=mouse.x-event_state.container_left；
高度=事件状态.容器高度-（mouse.y-事件状态.容器顶部）；
左=事件\状态。容器\左；
top=mouse.y；
}
如果（宽度>最小宽度和高度>最小高度和宽度<最大宽度和高度<最大高度）{
//为了提高性能，可以限制调用resizeImage（）的频率
重绘图像（宽度、高度）；
//如果没有这个，Firefox将不会重新计算图像尺寸，直到拖动结束
$container.offset（{'left'：left'top'：top}）；
}
}
//------------------------调整functino端的大小----------------------------//
init（）；
};
可调整大小的图像（$（'.resize image'）

使用画布调整图像大小
图像调整