如何打印或保存在線編輯的圖像（使用javascript/jQuery）？

我用html，css和javascript/jquery做了一個簡單的圖像處理實驗。如何打印或保存在線編輯的圖像（使用javascript/jQuery）？

我們可以從本地驅動器上傳圖片並顯示在瀏覽器中。之後，我們還可以編輯/標記顯示的圖像。我使用this jquery圖像標籤插件。

然後我想一想，如何保存/打印編輯後的圖像？

這是我的代碼片段：

$(function() { 
    $(":file").change(function() { 
     if (this.files && this.files[0]) { 
      var reader = new FileReader(); 
      reader.onload = imageIsLoaded; 
      reader.readAsDataURL(this.files[0]); 
     } 
    }); 
}); 

function imageIsLoaded(e) { 
    $('#myImg').attr('src', e.target.result); 
    $('#myImg').imageTag(); 
};

這裏是真正的直播應用：http://nanonimos.com/upload-tag-image/

和this is the source code。

任何線索/建議將不勝感激:)

來源

2015-12-02 Harkedian

該應用程序甚至不編輯圖像。它所做的只是創建一個'div'並重疊圖像。 – choz

可以自己手動爲文檔下載頭文件，然後附加base64圖像數據。將結果字符串設置爲目標空白鏈接的href，然後在其上觸發單擊事件。它可能工作，因爲瀏覽器將允許您在url欄中傳遞整個文檔，如果這不起作用，您可能會暫時將其存儲在服務器上，然後觸發新的選項卡以進行文件下載。 – r3wt

嗨，Choz。雅，我認爲是。但我想是否可以創建類似的應用程序，可以從我們的本地計算機上傳圖像，在線編輯，然後將其保存/打印爲編輯圖像？ – Harkedian

您可以將整個DIV轉換爲畫布，然後轉換畫布爲數據URI （PNG，JPEG）。查看此Fiddlecanvastoimage瞭解更多。

來源

2015-12-02 12:26:24

非常感謝@Vendhan！這個對我有用。 – Harkedian

Hi @Vendhan。想多問一點。當我們按「另存爲圖像」按鈕時，如何使它自動保存/下載圖像？這裏的鏈接：http：//nanonimos.com/pin-save-image/和這裏的來源：https://www.dropbox.com/s/qbs2o6fk88qzyxm/FINAL1.0.zip?dl=1 – Harkedian

嗨哈克迪安，到目前爲止，您只需使用html2pdf JS lib將HTML div元素轉換爲畫布。若要將畫布轉換爲數據uri（png，jpeg），您必須使用[Canvas2image]（https://github.com/hongru/canvas2image ）JS庫。 –

使用此功能（從＃1）到dataURI轉換成二進制大對象：

function dataURItoBlob(dataURI) { 
    // convert base64/URLEncoded data component to raw binary data held in a string 
    var byteString; 
    if (dataURI.split(',')[0].indexOf('base64') >= 0) 
     byteString = atob(dataURI.split(',')[1]); 
    else 
     byteString = unescape(dataURI.split(',')[1]); 

    // separate out the mime component 
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; 

    // write the bytes of the string to a typed array 
    var ia = new Uint8Array(byteString.length); 
    for (var i = 0; i < byteString.length; i++) { 
     ia[i] = byteString.charCodeAt(i); 
    } 

    return new Blob([ia], {type:mimeString}); 
}

，然後當你要保存剛剛發佈此文件服務器。

在HTML5中，你可以這樣做：

var blob = dataURItoBlob(data); 
var fd = new FormData(); 
fd.append("imageFile", blob);

然後用Ajax發送這樣的：

$.ajax({ 
    type: "POST", 
    url:"url to file", 
    data: fd, 
    success: function(result){ 
    //check success 
    }; 
});

來源

2015-12-02 10:19:35

如何打印或保存在線編輯的圖像（使用javascript/jQuery）？

回答

相關問題