Javascript，如何保存圖片由javascript改變

我正在製作一些網絡照片庫，我決定在那裏製作一些基本的東西來定製你的圖片，比如改變他們的width,height，圍繞那個和其他東西製作一些邊框。現在我改變我的形象的width和height，這樣的事情很簡單的JavaScript方法：Javascript，如何保存圖片由javascript改變

function smaller() { 
    var image = document.getElementById('forchange'); 

    var width = image.clientWidth; 
    var height = image.clientHeight; 

    image.height = height - 50; 
    image.width = width - 50; 
} 

function bigger() { 
    var image = document.getElementById('forchange'); 

    var width = image.clientWidth; 
    var height = image.clientHeight; 

    image.height = height + 50; 
    image.width = width + 50; 
}

HTML

{block content} 
{snippet changePhoto} 
<img src="{$photo}" id="forchange"> 
{/snippet} 
<label>Velkosť </label> 

<button type="submit" onclick="bigger()" value="{$photo}" name="bigger">+</button> 
<button type="submit" onclick="smaller()" value="{$photo}" name="smaller">-</button> 
<form action="{link Gallery:change $photo}" method="post" > 
<input type = "submit" value="ulozit" name="save"> 
</form>

它的工作的形象是較小或較大的根據是什麼按鈕，但是，刷新頁面後，圖像的寬度和高度與原來相同（邏輯上）。

如何保存或重寫保存在我的磁盤上的當前圖像文件，以便刷新頁面後我可以看到我按照自己的意願定製的新圖像？有沒有可能做這樣的事情？

我在網上搜索了很多，我發現了一些關於畫布和很多東西的東西，但沒有一件看起來像是我需要的東西。每個答案都非常感謝你。

來源

2016-04-24 eraz

您需要JQuery-AJAX/AJAX和PHP才能發生這種情況，您需要將其存儲。這是其中之一。 – divy3993

你也可以去cookie存儲，但不會持續如果用戶清除歷史記錄和cookie。 – divy3993

你可以使用cookie來保存image.height和image.width使用javascript.Everytime頁面加載，你可以檢查該cookie是否存在，如果存在設置高度和寬度的保存值 –

您在互聯網上找到的畫布是您可以實施的兩種解決方案之一。另一種解決方案是將圖像縮小到後端。

當您按照自己的方式更改圖像的寬度和高度時，實際發生的情況是您仍然擁有巨大的圖像，您只是告訴瀏覽器以較小的寬度和高度呈現它。我們無法訪問瀏覽器中較小的渲染版本的圖像，如果您嘗試保存圖像，它將保存較大版本的圖像。

解決方案

一）你問的服務器向您發送圖像的縮小版。您可以直接使用PHP來做到這一點，或者更容易，大多數服務器允許您使用Image Magick來做到這一點。

b）您可以壓縮和縮小前端的圖像。 Here是壓縮前端圖像的示例。要添加縮小功能，請將以下代碼添加到compressCanvas函數中。

canvas.width = width; 
canvas.height = height;

來源

2016-04-24 17:58:21

Javascript，如何保存圖片由javascript改變

回答

相關問題