Возможно ли сгенерировано из файла локального файла из html5-canvas

В моем холсте есть изображение, которое сгенерировано из локального файла или из изображений из Интернета. Когда я пытаюсь сохранить его с помощью функции toDataURl, я получаю защищенную ошибку. Как сохранить результат (без сервера, используя только js), и возможно ли это?Возможно ли сгенерировано из файла локального файла из html5-canvas

Я знаю о security rule, но может быть, есть какое-то решение, чтобы обойти Это правило

Все мой код в github при необходимости

источник

2014-02-14 aknew

Позор! Не обходите правила, созданные для обеспечения безопасности для наших пользователей.

Ключом к удовлетворению безопасности CORS и по-прежнему требуется то, что вам нужно, чтобы пользователь мог выбрать файл изображения, который необходимо загрузить в холст.

Если пользователь выбирает файл, безопасность CORS выполняется, и вы можете использовать холст по мере необходимости (в том числе использование canvas.toDataURL для сохранения холста).

Вот шаги, чтобы позволить пользователю выбрать файл из своего локального диска:

Добавить HTML элемент ввода с типом = «Файл»
щелкает пользователь просматривать на этом элементе и выбирает их file
Когда пользователь нажимает OK, используйте window.URL.createObjectURL для создания URL-адреса из выбранного файла.
Создайте новое изображение и укажите его источник URL, который вы создали в # 3.
Используйте context.drawImage, чтобы нарисовать ваше новое изображение на холсте.
Полученный холст совместим с CORS, поэтому canvas.toDataURL будет работать.

Вот пример кода:

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 
<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    $("#fileInput").change(function(e){ 
     var URL = window.webkitURL || window.URL; 
     var url = URL.createObjectURL(e.target.files[0]); 
     var img = new Image(); 
     img.onload = function() { 
       canvas.width=img.width; 
       canvas.height = img.height; 
       ctx.drawImage(img,0,0); 
       ctx.fillStyle="black"; 
       ctx.fillRect(0,canvas.height-30,canvas.width,30); 
       ctx.fillStyle="white"; 
       ctx.font="18px verdana"; 
       ctx.fillText("I'm OK with CORS!",5,canvas.height-8); 
     } 
     img.src = url; 
    }); 

    $("#save").click(function(){ 
     var html="<p>Right-click on image below and Save-Picture-As</p>"; 
     html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>"; 
     var tab=window.open(); 
     tab.document.write(html);   
    }); 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <input type="file" id="fileInput">  
    <button id="save">Save</button><br> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

источник

2014-02-14 21:42:23 markE

Почему стыдно? Я не веб-разработчик и вижу js второй раз в жизни :) Спасибо за ваш ответ, но как насчет использования изображения с сайта третьей части, возможно ли это? – aknew

Просто шутите о стыде :) Конечно, в примере кода, когда вы нажимаете кнопку «Просмотр», вы можете даже вставить URL-адрес http: // и загрузить это изображение с стороннего сайта. (Загрузка третьей стороны занимает некоторое время ... будьте терпеливы). – markE

Возможно ли сгенерировано из файла локального файла из html5-canvas

ответ

Смежные вопросы