HTML5 Canvas color 2 pngs相互重疊並形成動態url

感謝您的幫助提前。HTML5 Canvas color 2 pngs相互重疊並形成動態url

我想創建一個由兩個PNG組成的圖像。 1.將是一個基地，如手鐲和2.將是一塊石頭。用戶將有兩個輸入欄或預先確定的單選按鈕來改變石頭和基礎金屬的顏色。完成後，將創建一個動態網址用於共享圖像。

僅供參考，使用以前的帖子答案在一個輸入字段改變一個PNG的顏色：How to change color of an image using jquery

我想要兩張做兩次，然後有兩個圖像合併兩個一個每次輸入被更新。

再次感謝！

來源

2014-01-21 Jess Richman

一個的jsfiddle將在迴應可以理解，以幫助演示的工作示例。再次感謝。 –

這是一個基本的思想點在哪裏（用戶不會看到前兩個圖像，他們只會有兩個輸入，看到最終產品）：http://jsfiddle.net/jessrichman/8wg8e/# ＆togetherjs = b4CeLxOvvG –

您是否嘗試過使用DrawImage()來繪製兩張圖片？第二張圖片是否透明？

有關於這個問題的一個例子：Drawing PNG to a canvas element -- not showing transparency

來源

2014-01-21 09:21:45

欣賞響應。我看到了DrawImage示例，但是我不確定這是如何實現的，因爲我試圖讓它具有動態性並使用高質量的png並對其進行維護。 –

如果要使用畫布，請使用DrawImage繪製背景，然後再次使用DrawImage繪製前景（基於用戶輸入或選擇一個或多個圖像進行更新）？如果前景圖像是透明的，它會根據需要合併圖像？要分享您可能需要的圖片，還需要從網址默認讀取。 –

@馬克雷德曼肯定有正確的觀念：

繪製寶石與透明背景對您的金屬設置。

這是創業板的圖像可能是什麼樣子：http://jsfiddle.net/m1erickson/U8Z2g/

enter image description here

後：

enter image description here

在吊墜鑲嵌的頂部繪製客戶選擇寶石的演示用戶選擇了他們的寶石，您可以將畫布保存爲像這樣的.png圖片網址：

var pngURL = 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;} 
    button{display:none;} 
</style> 

<script> 
$(function(){ 

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

    // image loader 

    var imageURLs=[]; // put the paths to your images here 
    var imagesOK=0; 
    var imgs=[]; 
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stack1/pendant.jpg"); 
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stack1/purpleCZ.png"); 
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stack1/pinkCZ.png"); 
    loadAllImages(); 

    function loadAllImages(callback){ 
     for (var i=0; i<imageURLs.length; i++) { 
      var img = new Image(); 
      imgs.push(img); 
      img.onload = function(){ 
       imagesOK++; 
       if (imagesOK>=imageURLs.length) { 
        $("button").show(); 
       } 
      }; 
      img.onerror=function(){alert("image load failed:"+this.src);} 
      img.crossOrigin="anonymous"; 
      img.src = imageURLs[i]; 
     }  
    } 


    $("#purple").click(function(){ 
     draw(1); 
    }); 

    $("#pink").click(function(){ 
     draw(2); 
    }); 

    function draw(index){ 
     var stone=imgs[index]; 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     ctx.drawImage(imgs[0],0,0,800,800,0,0,300,300); 
     ctx.drawImage(stone,0,0,stone.width,stone.height,108,134,stone.width*1.24,stone.height*1.24); 
    } 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <button id="purple">Purple</button> 
    <button id="pink">Pink</button><br> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

來源

2014-01-21 18:13:25 markE

HTML5 Canvas color 2 pngs相互重疊並形成動態url

回答

相關問題