Fatal编程技术网
  • javascript/
  • 通过javascript将图像转换为卡通

通过javascript将图像转换为卡通

javascript jquery

通过javascript将图像转换为卡通,javascript,jquery,Javascript,Jquery,我正在尝试为一个项目使用。您可以转到internet上的图像，右键单击“复制”，然后将其粘贴到作者创建的图像上，效果良好 我不必粘贴图像，而是尝试单击一个按钮，从div中选择一个图像，然后转换它。作者善意地给出了一些指导，但当我尝试时，它抛出了一个错误 comicify.php:30 Uncaught TypeError: t.process is not a function at comicify (comicify.html:30) at start (comicify.h

我正在尝试为一个项目使用。您可以转到internet上的图像，右键单击“复制”，然后将其粘贴到作者创建的图像上，效果良好

我不必粘贴图像，而是尝试单击一个按钮，从div中选择一个图像，然后转换它。作者善意地给出了一些指导，但当我尝试时，它抛出了一个错误

comicify.php:30 Uncaught TypeError: t.process is not a function
    at comicify (comicify.html:30)
    at start (comicify.html:21)
    at HTMLButtonElement.onclick (comicify.html:6)
如果这只是一个语法错误，最好能得到一些关于如何修复它的提示

这是我的示例代码

功能启动{ //巴阿； var myImg=$img.propsrc； var-myDistance=50； console.logmyImg； var f=函数myimg{ //对返回的图像执行一些操作 }; var c=comicifymyImg，myDistance，f； }; 功能comicifyimg、dist、OUT{ var t=这个； t、 srcimg=img； t、 距离=距离； t、 outfun=outp； t、 容器=$；//$resultHolder； t、 过程； } comicify.prototype={ 绘图：函数容器{ var t=这个； t、 容器=容器； 变量输入=$.valt.distance.changefunction{ t、 距离=该值； 如果！=t.srcimg[0].src{ t、 过程； } }; container.append$.textDirections:.append $ .append$.TEXT将定义单个新颜色的颜色向量之间的距离设置为距离 .append$.TEXT将图像粘贴到页面 .append$.textWait-您正在用Javascript处理图像。。。 ; container.append$.append$.textDistance:.width400px.appendinput t、 srcimg=$； var w=canvas[0]。宽度=t.srcimg[0]。宽度； var h=canvas[0]。高度=t.srcimg[0]。高度； var prog=$.textProcessing。。。； t、 container.appendprog； t、 ctx=canvas[0]。getContext'2d'； t、 ctx.drawImaget.srcimg[0]，0,0； t、 image=t.ctx.getImageData0,0,w,h；//颜色RGBA的数组[4*w*h] t、 ctx.clearRect0，0，w，h； t、 mask=Arrayw； var zz=数组； 对于var i=0；i0&&n0&&t.mask[i-1][j]{ t、 多点I-1，j } 如果j+10&&t.mask[i][j-1]{ t、 多潘尼，j-1 } } 回来 }, avgPt：功能I、j、ct{ var t=这个； var w=t.srcimg[0]。宽度； var h=t.srcimg[0]。高度； 如果i>0&&j>0&&i这是因为您使用comificy.prototype来定义方法，这意味着流程是一个实例方法

要解决这个问题，只需输入一个新词：var c=new comicifymyImg，myDistance，f

见：

功能启动{ //巴阿； var myImg=$img.propsrc； var-myDistance=50； console.logmyImg； var f=函数myimg{ //对返回的图像执行一些操作 }; var c=新comicifymyImg，myDistance，f； }; 功能comicifyimg、dist、OUT{ var t=这个； t、 srcimg=img； t、 距离=距离； t、 outfun=outp； t、 容器=$；//$resultHolder； t、 过程； } comicify.prototype={ 绘图：函数容器{ var t=这个； t、 容器=容器； 变量输入=$.valt.distance.changefunction{ t、 距离=该值； 如果！=t.srcimg[0].src{ t、 过程； } }; container.append$.textDirections:.append $ .append$.TEXT将定义单个新颜色的颜色向量之间的距离设置为距离 .append$.TEXT将图像粘贴到页面 .append$.textWait-您正在用Javascript处理图像。。。 ; container.append$.append$.textDistance:.width400px.appendinput t、 srcimg=$； var w=canvas[0]。宽度=t.srcimg[0]。宽度； var h=canvas[0]。高度=t.srcimg[0]。高度； var prog=$.textProcessing。。。； t、 container.appendprog； t、 ctx=canvas[0]。getContext'2d'； t、 ctx.drawImaget.srcimg[0]，0,0； t、 image=t.ctx.getImageData0,0,w,h；//颜色RGBA的数组[4*w*h] t、 ctx.clearRect0，0，w，h； t、 mask=Arrayw； var zz=数组； 对于var i=0；i0&&n0&&t.mask[i-1][j]{ t、 多点I-1，j } 如果j+10&&t.mask[i][j-1]{ t、 多潘尼，j-1 } } 回来 }, avgPt：功能I、j、ct{ var t=这个； var w=t.srcimg[0]。宽度； var h=t.srcimg[0]。高度； 如果i>0&&j>0&&i