3

プロジェクトとして小さな画像操作 Web アプリを作成しようとしています。ドラッグ キャンバス イメージをブラウザーからデスクトップに実装しようとしています。私はいくつかの掘り出し物をして見つけました

http://www.thecssninja.com/javascript/gmail-dragoutおよびhttp://jsfiddle.net/bgrins/xgdSC/ (TheCssNinja および Brian Grinstead 提供)

    function dragoutImages() {

    if (!document.addEventListener) {
        return;
    }

    document.addEventListener("dragstart", function(e) {
        var element = e.target;
        var src;

        if (element.tagName === "IMG" && element.src.indexOf("data:") === 0) {
            src = element.src;
        }

        if (element.tagName === "CANVAS") {
            try {
                src = element.toDataURL();
            }
            catch(e) { }
        }

        if (src) {
            var name = element.getAttribute("alt") || "download";
            var mime = src.split(";")[0].split("data:")[1];
            var ext = mime.split("/")[1] || "png";
            var download = mime + ":" + name + "." + ext + ":" + src;

            e.dataTransfer.setData("DownloadURL", download);   
        }
    }, false);
    }


    function drawCanvas(){
    var canvas = document.getElementById('mycanvas');
    var ctx = canvas.getContext('2d');

    var lingrad = ctx.createLinearGradient(0,0,0,150);
    lingrad.addColorStop(0, '#000');
    lingrad.addColorStop(0.5, '#669');
    lingrad.addColorStop(1, '#fff');


    ctx.fillStyle = lingrad;

    ctx.fillRect(0, 0, canvas.width, canvas.height);

    var img = new Image();
    img.src = canvas.toDataURL("image/png");
    img.alt = 'downloaded-from-image';

    $(img).appendTo("body");

    }

   dragoutImages();
   drawCanvas();

これは HTML の要素であるファイルに対して機能しますが、理論を使用してキャンバス画像を取得してダウンロードすることはできません。誰かがそのような機能を実装しましたか?

canvas.toDataURL を使用して画像データを取得しました。アラートを実行すると、エンコードされた画像データが表示され、キャンバスのドラッグが開始されますが、ブラウザの外ではアイコンが停止記号に戻ります。

これを実装する方法に関するアプローチとアイデアを探しています。

これは私がなんとか実装したもので、かなりうまく機能しています。

function download(e){
downloadImageData = eCanv.getImageData(750 - (scaledWidth / 2), 250 - (scaledHeight / 2), scaledWidth, scaledHeight);
dlcanvas = document.createElement('canvas');
dlcanvas.setAttribute('width',scaledWidth);
dlcanvas.setAttribute('height',scaledHeight);
dlcontext = dlcanvas.getContext("2d");
dlcontext.putImageData(downloadImageData, 0,0);
url = dlcanvas.toDataURL('image/jpg');
//name = document.getElementById("filename").value;
var mime = url.split(";")[0].split("data:")[1];
var name = mime.split("/")[0];
var ext = mime.split("/")[1] || "jpg";
var download = mime + ":" + name + "." + ext + ":" + url;
e.dataTransfer.setData("DownloadURL", download);        
}

cssninja と Brian Grinstead からの適応コード。

4

2 に答える 2

0

いいえ。

セキュリティ上の理由から、Javascriptはローカル ファイル システムに書き込むことができません。

Javascript は、ファイルリーダーを使用してローカル ファイル システムから読み取ることができます: http://www.html5rocks.com/en/tutorials/file/dndfiles/

サンドボックス化されたブラウザー ファイル (localstorage) に書き込むこともできます: http://www.w3schools.com/html/html5_webstorage.asp

サーバーから画像をバウンスして、サーバーから画像をダウンロードするかどうかをユーザーに尋ねることもできます。

于 2013-02-27T23:42:19.280 に答える