亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

用Js將彩色圖片轉換成黑白,失敗

用Js將彩色圖片轉換成黑白,失敗

慕工程0101907 2019-03-21 18:13:51
剛剛接觸canvas,學著把一張圖片轉換成黑白的。但是始終不能成功,有點懵逼。謝謝大家。    <body>        <canvas width="500" height="500"></canvas>        <script>            var canvas = document.querySelector("canvas");            var ctx = canvas.getContext("2d");            var image = new Image();            image.onload = function(){                ctx.drawImage(image,0,0);                makeGrayScale();            }            image.src = "images/background.jpg";            var makePixelGrayScale = function (r,g,b,a){                var y = ( 0.3 * r) + ( 0.59 * g ) + ( 0.11 * b);                return {r:y,g:y,b:y,a:y};            };            function makeGrayScale(){                var r,g,b,a;                var imageData = ctx.getImageData(0,0,500, 500)                var numPixels = imageData.data.length/4;                for (var i=0; i<numPixels; i++){                    r = imageData.data[i*4+0];                    g = imageData.data[i*4+1];                    b = imageData.data[i*4+2];                    a = imageData.data[i*4+3];                    pixel = makePixelGrayScale(r,g,b,a);                    imageData.data[i*4+0] = pixel.r;                    imageData.data[i*4+1] = pixel.g;                    imageData.data[i*4+2] = pixel.b;                    imageData.data[i*4+3] = pixel.a;                }                ctx.putImageData(imageData,0,0);            };        </script>    </body>Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.    at makeGrayScale (file:///C:/Users/yocor/Github/aboutCanvas/createCanvas.html:26:37)    at Image.image.onload (file:///C:/Users/yocor/Github/aboutCanvas/createCanvas.html:14:17)
查看完整描述

3 回答

?
尚方寶劍之說

TA貢獻1788條經驗 獲得超4個贊

是什么不成功?報了什么錯?出現了什么現象?你不可能就貼一段代碼上來讓回答的人猜吧。

代碼無錯,如果你這邊不能運行,一定是你直接用點開html的方式來運行代碼。

通過這種方式運行的話,你引入的圖片可能會被瀏覽器認為是不同的站點,從而canvas在getImageData的時候出現跨域錯誤,canvas不能獲取渲染的跨域的圖片的信息。

如果你想正確運行,需要用IIS或者nginx這樣的東西來做個本地站點,或者使用webpack-dev-server


查看完整回答
反對 回復 2019-04-02
?
繁花不似錦

TA貢獻1851條經驗 獲得超4個贊

提問也是技術活,要先把你的問題描述清楚,提供必要的素材,想要實現的功能和樣式。


查看完整回答
反對 回復 2019-04-02
?
天涯盡頭無女友

TA貢獻1831條經驗 獲得超9個贊

file:///訪問模式換成http://xxxxxx


查看完整回答
反對 回復 2019-04-02
  • 3 回答
  • 0 關注
  • 654 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號