putImageData(), zu halten, wie die alten Pixel, wenn neue Pixel transparent?

In html5, wenn Sie beim zeichnen auf eine Leinwand, mit putImageData(), wenn einige der Pixel, die Sie zeichnen, sind transparent oder semi-transparent), wie halten Sie alt Pixel im canvas-Bereich unberührt?

Beispiel:

var imgData = context.createImageData(30,30);
for(var i=0; i<imgData.data.length; i+=4)
{
imgData.data[i]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
if((i/4)%30 > 15)imgData.data[i+3] = 0;
}
context.putImageData(imgData,0,0);

Der rechten Hälfte der 30x30 rect ist transparent.
Wenn diese gezeichnet über das, was auf der Leinwand die Pixel hinter der rechten Hälfte entfernt werden (oder werden thransparent). Wie halte ich Sie?

InformationsquelleAutor Mohsin | 2014-03-05

Können Sie getImageData zu erstellen, die ein semi-transparentes overlay:

erstellen Sie einen temporären offscreen Leinwand
getImageData, um die pixel-Daten aus dem offscreen Leinwand
ändern Sie die Pixel, wie Sie es wünschen
putImageData die Pixel wieder auf die offscreen-Leinwand
Verwendung der Methode drawImage zu zeichnen offscreen-Leinwand auf den Bildschirm-Leinwand

putImageData(), zu halten, wie die alten Pixel, wenn neue Pixel transparent?

Hier ist der Beispiel-code und eine Demo: http://jsfiddle.net/m1erickson/CM7uY/

<!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 context=canvas.getContext("2d");

    //draw an image on the canvas
    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/stack1/landscape1.jpg";
    function start(){
        canvas.width=img.width;
        canvas.height=img.height;
        context.drawImage(img,0,0);

        //overlay a red gradient 
        drawSemiTransparentOverlay(canvas.width/2,canvas.height)

    }

    function drawSemiTransparentOverlay(w,h){

        //create a temporary canvas to hold the gradient overlay
        var canvas2=document.createElement("canvas");
        canvas2.width=w;
        canvas2.height=h
        var ctx2=canvas2.getContext("2d");

        //make gradient using ImageData
        var imgData = ctx2.getImageData(0,0,w,h);
        var data=imgData.data;
        for(var y=0; y<h; y++) {
            for(var x=0; x<w; x++) {
                var n=((w*y)+x)*4;
                data[n]=255;
                data[n+1]=0;
                data[n+2]=0;
                data[n+3]=255;
                if(x>w/2){
                    data[n+3]=255*(1-((x-w/2)/(w/2)));
                }
            }
        }

        //put the modified pixels on the temporary canvas
        ctx2.putImageData(imgData,0,0);

        //draw the temporary gradient canvas on the visible canvas
        context.drawImage(canvas2,0,0);

    }


}); //end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=200></canvas>
</body>
</html>

Alternativ können Sie check-out mit einem linearen Gradienten zu tun, Ihre Wirkung direkter.

http://jsfiddle.net/m1erickson/j6wLR/

Danke, die Zeichnung einer Leinwand, auf dem anderen mit der Methode drawImage() ist genau das, was ich brauche.

InformationsquelleAutor markE

3

Problem

Wie Sie wissen, ist Ihre Aussage
```
if((i/4)%30 > 15)imgData.data[i+3] = 0;
```
machen Pixel auf der rechten Hälfte des Bildes transparent sein, so dass jedes andere Objekt auf der Seite hinter der Leinwand kann man durch die canvas an, dass die pixel-position. Sie sind jedoch immer noch überschreiben die pixel auf der Leinwand selbst mit context.putImageData, ersetzt alle seine vorherigen Pixel. Die Transparenz, die Sie hinzufügen, wird nicht dazu führen, die bisherigen Pixel zu zeigen, durch, weil das Ergebnis putImageData ist nicht einen zweiten Satz von Pixeln, die auf der vorherigen Pixel im canvas-Bereich, sondern eher der Ersatz der vorhandenen Pixel.

Lösung

Schlage ich vor, dass Sie beginnen, Ihren code nicht mit createImageData die beginnen mit einem leeren Satz von Daten, sondern mit getImageData die geben Sie eine Kopie der vorhandenen Daten, mit zu arbeiten. Sie können dann mit dem bedingten Anweisung zu vermeiden überschreiben der Teil des Bildes, die Sie erhalten wollen. Dies wird auch Ihre Funktion effizienter.
```
var imgData = context.getImageData(30,30);
for(var i=0; i<imgData.data.length; i+=4)
{
  if((i/4)%30 > 15) continue;
  imgData.data[i]=255;
  imgData.data[i+1]=0;
  imgData.data[i+2]=0;
  imgData.data[i+3]=255;
}
context.putImageData(imgData,0,0);
```
- Danke. Du hast Recht, mit getImageData() können Sie tun, was Sie wollen mit alten Pixel, aber Sie brauchen, um eine Formel zu mischen, neue Pixel mit alten. Ich habe versucht und es war perfekt, aber bald, als ich begann, diese in einer for-Schleife (für Zeichnung), ich habe ein seltsames Ergebnis, wenn ich etwas zeichne, die transparent ist.
InformationsquelleAutor Joseph Myers
1

Etwas, dass ausgelöst me up, die von nutzen sein können... ich hatte Probleme mit diesem, weil ich davon ausgegangen, dass putImageData() und drawImage() arbeiten würde, in der gleichen Weise, aber es scheint Sie nicht. putImageData() überschreibt die vorhandenen Pixel mit eigenen transparenten Daten während drawImage() verlassen Sie unberührt.

Wenn man in dieser, die ich gerade blickte auf die Dokumente für CanvasRenderingContext2D.globalCompositeOperation (sollte gelesen haben, enger), sah, dass source-over ist die Standardeinstellung und wusste nicht, dass dies würde für Sie nicht gelten putImageData()

Zeichnung in eine temporäre Leinwand und dann mit drawImage() hinzufügen die temp Leinwand zu den wichtigsten Kontext war die Lösung, die ich brauchte, also ein hoch auf diese.

InformationsquelleAutor popClingwrap
0

Wollte ich kopieren Sie eine gestochen SCHARFE, un-modifizierte version von der Leinwand auf sich selbst. Ich kam schließlich mit dieser Lösung, die gilt.

https://jsfiddle.net/4Le454ak/1/

Dem Kopie Teil ist in diesem code:
```
var imageData = canvas.toDataURL(0, 0, w, h);
var tmp = document.createElement('img');
tmp.style.display = 'none'
tmp.src = imageData;
document.body.appendChild(tmp);
ctx.drawImage(tmp, 30, 30);
```
Was passiert:
- kopieren Sie die Bilddaten von der Leinwand
- Bild-Daten auf einen nicht-angezeigt <img> (<img> werden im dom obwohl)
- zeichnen Sie das Bild wieder auf die Leinwand
- können Sie löschen oder wiederverwenden <img> an dieser Stelle
InformationsquelleAutor Jacksonkr

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Problem

Lösung