Ich verwende also Google Maps und bekomme das Bild so, dass es so aussieht
<img id="staticMap"
src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false">
Ich muss es retten. Ich habe folgendes gefunden:
function getBase64FromImageUrl(URL) {
var img = new Image();
img.src = URL;
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
var dataURL = canvas.toDataURL("image/png");
alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
};
}
Aber ich bekomme dieses Problem:
Nicht erfasster Sicherheitsfehler: Fehler beim Ausführen von 'toDataURL' auf 'HTMLCanvasElement': Beschmutzte Leinwände können möglicherweise nicht exportiert werden.
Ich habe nach Korrekturen gesucht. Ich habe hier ein Beispiel gefunden, wie man CORS verwendet, aber ich kann diese beiden Codeteile immer noch nicht zusammenbinden, damit es funktioniert. Vielleicht mache ich es falsch und es gibt einen einfacheren Weg, es zu tun? Ich versuche, dieses Bild zu speichern, damit ich die Daten auf meinen Server übertragen kann. Vielleicht hat jemand so etwas gemacht und weiß, wie man .toDataURL()
Arbeit macht, wenn ich sie brauche?
quelle
403
), können Sie möglicherweise auf die Verwendung zurückgreifen,canvas.toDataURL(img)
in der Hoffnung, dass sie vom selben Ursprung wie die Seite bereitgestellt wird . Dieses Standardverhalten führt auch zur Originaldatei (EXIF et al.)crossOrigin
Attribut vor dem Festlegen festzulegenimg.src
.Verwenden Sie einfach das
crossOrigin
Attribut und übergeben Sie es'anonymous'
als zweiten Parametervar img = new Image(); img.setAttribute('crossOrigin', 'anonymous'); img.src = url;
quelle
img.src = url + '?' + new Date().getTime();
Diese Methode verhindert, dass Sie von dem Server, auf den Sie zugreifen, den Fehler "Zugriffskontrolle-Zulassen-Ursprung" erhalten.
var img = new Image(); var timestamp = new Date().getTime(); img.setAttribute('crossOrigin', 'anonymous'); img.src = url + '?' + timestamp;
quelle
Versuchen Sie den Code unten ...
<img crossOrigin="anonymous" id="imgpicture" fall-back="images/penang realty,Apartment,house,condominium,terrace house,semi d,detached, bungalow,high end luxury properties,landed properties,gated guarded house.png" ng-src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" height="220" width="200" class="watermark">
quelle
fall-back
Attributs?In meinem Fall habe ich das WebBrowser-Steuerelement verwendet (IE 11 erzwingen) und konnte den Fehler nicht überwinden. Der Wechsel zu CefSharp, das Chrome verwendet, hat es für mich gelöst.
quelle
Ich hatte die gleiche Fehlermeldung. Ich hatte die Datei in einer einfachen .html, als ich die Datei an PHP in Apache übergab, funktionierte es
html2canvas(document.querySelector('#toPrint')).then(canvas => { let pdf = new jsPDF('p', 'mm', 'a4'); pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 211, 298); pdf.save(filename); });
quelle
Durch die Verwendung von Fabric js können wir dieses Sicherheitsfehlerproblem im IE lösen.
function getBase64FromImageUrl(URL) { var canvas = new fabric.Canvas('c'); var img = new Image(); img.onload = function() { var canvas1 = document.createElement("canvas"); canvas1.width = this.width; canvas1.height = this.height; var ctx = canvas.getContext('2d'); ctx.drawImage(this, 0, 0); var dataURL = canvas.toDataURL({format: "png"}); }; img.src = URL; }
quelle