dreht und dann

Question

var imageUrl = {}; 

function convertToDataURLviaCanvas(url, item, outputFormat){ 
    var img = new Image(); 
    img.onload = function(){ 
     var canvas = document.createElement('CANVAS'); 
     var ctx = canvas.getContext('2d'); 
     var dataURL; 
     canvas.height = this.height; 
     canvas.width = this.width; 
     ctx.drawImage(this, 0, 0); 
     dataURL = canvas.toDataURL(); 
     storemapImage(item, dataURL); 
     console.log(imageUrl); 
    }; 
} 

function storemapImage(propertyName, url){ 
    imageUrl[propertyName] = { 
    objectImage: url 
    }; 
    return; 
} 


var src = "http://orig11.deviantart.net/c565/f/2013/092/1/6/mario_pixel_by_juli95-d607odz.png" 

function capture(){ 
    convertToDataURLviaCanvas(src, "display1", "Image/png"); 
} 

meine Absicht, ein normales PNG-Bild in json Daten zum Objekt speichern drehen und speichert dann zu einem Objekt (imageUrl), hier ist mein Code, ich getestet alot aber Hab noch nichts davon bekommen, kann jemand nach mir suchen?

Demo

Answer 1

Ich glaube nicht, dass du hier mit der Antwort zufrieden sein werden.

Zuerst stimmen Ihr "Demo" -Link und der Code hier nicht überein.

In Ihrem Code oben sind Sie die Konsole, die imageUrl protokolliert, bevor Sie es tatsächlich einstellen, also wird es nicht korrekt sein. Wenn Sie Ihre console.log in das Ende Ihrer storemapImage verschieben, sollten Sie einen Wert erhalten. In Ihrer Demo versuchen Sie, console.log direkt nach dem Aufruf von convertToDataURLviaCanvas zu starten, aber es wird nicht mehr gesetzt, da Onload mindestens ein paar Millisekunden dauert, um das Bild tatsächlich herunterzuladen. Sie stellen auch nicht img.src so, dass es nie versucht, zu laden, und nie das Onload auslöst.

Also all das reparieren, es kommt her, um Ursprungsanforderungen zu kreuzen. Ihr Browser verfügt über eine Sicherheitseinstellung, die verhindert, dass JavaScript auf Objekte aus anderen Domänen zugreift. JavaScript kann ein Image-Objekt erstellen und angeben, dass es geladen werden soll. Sie können es in einer Arbeitsfläche speichern, aber sobald Sie dies getan haben, wird die Arbeitsfläche als verdorben betrachtet und Sie können sie nicht in eine URL konvertieren.

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image hat weitere Informationen.

Wenn der Remote-Server CORS-Header aktiviert hat, dann kann es getan werden, aber abweichende Kunst hat dies nicht getan.

var imageUrl = {}; 

function convertToDataURLviaCanvas(url, item, outputFormat){ 
    var img = new Image(); 
    img.crossOrigin = "Anonymous"; 
    img.src = url; 
    img.onload = function(){ 
     var canvas = document.createElement('CANVAS'); 
     var ctx = canvas.getContext('2d'); 
     var dataURL; 
     canvas.height = this.height; 
     canvas.width = this.width; 
     ctx.drawImage(this, 0, 0); 
     dataURL = canvas.toDataURL(); 
     storemapImage(item, url); 
    }; 
} 

function storemapImage(propertyName, url){ 
    imageUrl[propertyName] = { 
    objectImage: url 
    }; 
    console.log('imageUrl', imageUrl) 
    return; 
} 

function capture(){ 
    //convertToDataURLviaCanvas("https://orig11.deviantart.net/c565/f/2013/092/1/6/mario_pixel_by_juli95-d607odz.png", "display1", "Image/png"); 
    convertToDataURLviaCanvas("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/pie.png", "display1", "Image/png"); 
} 

https://jsfiddle.net/svr4r681/ ist eine aktualisierte Geige mit einem Bild, das funktioniert, aber noch nicht mit deviantart funktioniert.