วิธีการแก้ไขข้อผิดพลาด getImageData () ผืนผ้าใบได้รับการปนเปื้อนโดยข้อมูลข้ามแหล่งกำเนิด

รหัสของฉันทำงานได้ดีมากบน localhost ของฉัน แต่มันใช้งานไม่ได้บนไซต์

ฉันได้รับข้อผิดพลาดนี้จากคอนโซลสำหรับบรรทัดนี้.getImageData(x,y,1,1).data:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 

ส่วนหนึ่งของรหัสของฉัน:

jQuery.Event.prototype.rgb=function(){
        var x =  this.offsetX || (this.pageX - $(this.target).offset().left),y =  this.offsetY || (this.pageY - $(this.target).offset().top);
        if (this.target.nodeName!=="CANVAS")return null;
        return this.target.getContext('2d').getImageData(x,y,1,1).data;
    }

หมายเหตุ: URL รูปภาพของฉัน (src) มาจาก URL โดเมนย่อย

อย่างที่คนอื่นบอกว่าคุณกำลัง "ย้อมสี" ผืนผ้าใบโดยการโหลดจากโดเมน cross origins

https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

อย่างไรก็ตามคุณสามารถป้องกันได้โดยเพียงแค่ตั้งค่า:

img.crossOrigin = "Anonymous";

สิ่งนี้ใช้ได้เฉพาะเมื่อเซิร์ฟเวอร์ระยะไกลตั้งค่าส่วนหัวต่อไปนี้อย่างเหมาะสม:

Access-Control-Allow-Origin "*"

ตัวเลือกไฟล์ Dropboxเมื่อใช้ตัวเลือก "ลิงก์โดยตรง" เป็นตัวอย่างที่ดีสำหรับสิ่งนี้ ฉันใช้บนoddprints.comเพื่อรูปภาพจาก url รูปภาพดรอปบ็อกซ์ระยะไกลลงในผืนผ้าใบของฉันจากนั้นส่งข้อมูลรูปภาพกลับไปที่เซิร์ฟเวอร์ของฉัน ทั้งหมดในจาวาสคริปต์

ฉันพบว่าฉันต้องใช้.setAttribute('crossOrigin', '')และต้องต่อท้ายการประทับเวลากับสตริงการสืบค้นของ URL เพื่อหลีกเลี่ยงการตอบกลับ 304 ที่ไม่มีAccess-Control-Allow-Originส่วนหัว

สิ่งนี้ให้ฉัน

var url = 'http://lorempixel.com/g/400/200/';
var imgObj = new Image();
imgObj.src = url + '?' + new Date().getTime();
imgObj.setAttribute('crossOrigin', '');

คุณจะไม่สามารถวาดภาพจากเซิร์ฟเวอร์อื่นลงในผืนผ้าใบได้โดยตรงจากนั้นใช้ getImageDataคุณจะไม่สามารถที่จะวาดภาพได้โดยตรงจากเซิร์ฟเวอร์อื่นเป็นผืนผ้าใบและการใช้งานแล้วเป็นปัญหาด้านความปลอดภัยและผ้าใบจะถูกพิจารณาว่า "แปดเปื้อน"

คุณจะบันทึกสำเนาของรูปภาพไปยังเซิร์ฟเวอร์ของคุณโดยใช้ PHP แล้วโหลดรูปภาพใหม่ได้หรือไม่? ตัวอย่างเช่นคุณสามารถส่ง URL ไปยังสคริปต์ PHP และบันทึกลงในเซิร์ฟเวอร์ของคุณจากนั้นส่งคืนชื่อไฟล์ใหม่เป็นจาวาสคริปต์ของคุณดังนี้:

<?php //The name of this file in this example is imgdata.php

  $url=$_GET['url'];

  // prevent hackers from uploading PHP scripts and pwning your system
  if(!@is_array(getimagesize($url))){
    echo "path/to/placeholderImage.png";
    exit("wrong file type.");
  }

  $img = file_get_contents($url);

  $fn = substr(strrchr($url, "/"), 1);
  file_put_contents($fn,$img);
  echo $fn;

?>

คุณจะใช้สคริปต์ PHP กับจาวาสคริปต์ ajax เช่นนี้:

xi=new XMLHttpRequest();
xi.open("GET","imgdata.php?url="+yourImageURL,true);
xi.send();

xi.onreadystatechange=function() {
  if(xi.readyState==4 && xi.status==200) {
    img=new Image;
    img.onload=function(){ 
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    }
    img.src=xi.responseText;
  }
}

ถ้าคุณใช้ getImageDataบนผืนผ้าใบหลังจากนั้นก็จะทำงานได้ดี

หรือหากคุณไม่ต้องการบันทึกภาพทั้งหมดคุณสามารถส่งพิกัด x & y ไปยังสคริปต์ PHP ของคุณและคำนวณค่า rgba ของพิกเซลที่ด้านนั้น ฉันคิดว่ามีไลบรารีที่ดีสำหรับการประมวลผลภาพใน PHP

หากคุณต้องการใช้แนวทางนี้โปรดแจ้งให้เราทราบหากคุณต้องการความช่วยเหลือในการนำไปใช้

edit-1: peeps ชี้ให้เห็นว่าสคริปต์ php ถูกเปิดเผยและอนุญาตให้อินเทอร์เน็ตใช้งานได้โดยมีเจตนาร้าย มีหลายล้านวิธีในการจัดการสิ่งนี้หนึ่งในวิธีที่ง่ายที่สุดคือการทำให้ URL สับสน ... ฉันคิดว่าการปฏิบัติ php ที่ปลอดภัยสมควรได้รับ google แยกต่างหาก P

แก้ไข -2: ตามความต้องการที่เป็นที่นิยมฉันได้เพิ่มการตรวจสอบเพื่อให้แน่ใจว่าเป็นรูปภาพไม่ใช่สคริปต์ php (จาก: PHP ตรวจสอบว่าไฟล์เป็นรูปภาพหรือไม่ )

ฉันพบข้อผิดพลาดนี้ในChromeขณะที่ฉันกำลังทดสอบโค้ดในเครื่อง ฉันเปลี่ยนมาใช้Firefoxและฉันไม่เห็นข้อผิดพลาดอีกต่อไป การเปลี่ยนไปใช้เบราว์เซอร์อื่นอาจเป็นการแก้ไขอย่างรวดเร็ว

หากคุณใช้วิธีแก้ปัญหาที่ให้ไว้ในคำตอบแรกตรวจสอบให้แน่ใจว่าคุณได้เพิ่มimg.crossOrigin = "Anonymous";หลังจากที่คุณประกาศimgตัวแปรแล้ว (เช่นvar img = new Image();)

ปัญหาของคุณคือคุณโหลดรูปภาพภายนอกซึ่งหมายถึงจากโดเมนอื่น ซึ่งทำให้เกิดข้อผิดพลาดด้านความปลอดภัยเมื่อคุณพยายามเข้าถึงข้อมูลใด ๆ ของบริบทพื้นที่ทำงานของคุณ

คุณกำลัง "ย้อมสี" ผืนผ้าใบโดยการโหลดจากโดเมน cross origins ตรวจสอบบทความ MDN นี้:

https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

เมื่อทำงานบนโลคัลให้เพิ่มเซิร์ฟเวอร์

ฉันมีปัญหาคล้ายกันเมื่อทำงานกับท้องถิ่น url ของคุณจะเป็นพา ธ ไปยังไฟล์ในเครื่องเช่น file: ///Users/PeterP/Desktop/folder/index.html

โปรดทราบว่าฉันใช้ MAC

ฉันทำได้โดยการติดตั้ง http-server ทั่วโลก https://www.npmjs.com/package/http-server

ขั้นตอน:

1. การติดตั้งทั่วโลก: npm install http-server -g
2. เรียกใช้เซิร์ฟเวอร์: http-server ~/Desktop/folder/

PS: ฉันคิดว่าคุณได้ติดตั้งโหนดไว้มิฉะนั้นคุณจะไม่ได้รับการรันคำสั่ง npm ไกลมาก

ดังที่ Matt Burn กล่าวไว้ในคำตอบของเขาคุณอาจต้องเปิดใช้งาน CORS บนเซิร์ฟเวอร์ที่โฮสต์ภาพปัญหา

หากเซิร์ฟเวอร์เป็น Apache สามารถทำได้โดยการเพิ่ม snippet ต่อไปนี้ (จากที่นี่ ) ในการกำหนดค่า VirtualHost หรือ.htaccessไฟล์ของคุณ:

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

... หากเพิ่มลงใน VirtualHost คุณอาจต้องโหลด config ของ Apache ซ้ำด้วย (เช่นsudo service apache2 reloadถ้า Apache ทำงานบนเซิร์ฟเวอร์ Linux)

ปัญหาของฉันยุ่งเหยิงมากฉันแค่ base64 เข้ารหัสภาพเพื่อให้แน่ใจว่าไม่มีปัญหา CORS

วันนี้ฉันพบปัญหาเดียวกันและแก้ปัญหาโดยใช้รหัสตามนี้

รหัส html:

<div style='display: none'>
  <img id='img' src='img/iak.png' width='600' height='400' />
</div>
<canvas id='iak'>broswer don't support canvas</canvas>

รหัส js:

var canvas = document.getElementById('iak')
var iakImg = document.getElementById('img')
var ctx = canvas.getContext('2d')
var image = new Image()
image.src=iakImg.src
image.onload = function () {
   ctx.drawImage(image,0,0)
   var data = ctx.getImageData(0,0,600,400)
}

รหัสเหมือนข้างบนและไม่มีปัญหาข้ามโดเมน

ฉันมีปัญหาเดียวกันและสำหรับฉันมันทำงานได้โดยการเชื่อมต่อกัน https:${image.getAttribute('src')}