12

画像を操作するJSがいくつかあります。ドット絵のようなグラフィックが欲しいので、グラフィックエディタで元の画像を拡大する必要がありました。しかし、小さな画像ですべての操作を行い、html5機能で拡大するのは良い考えだと思います。これにより、処理時間が大幅に節約されます（たとえば、私のデモ（警告：ドメイン名が動作中に問題を引き起こす可能性があるなど）がFirefoxで非常に長く読み込まれるため）。しかし、画像のサイズを変更しようとすると、バイキュービックにリサンプリングされます。リサンプリングせずに画像のサイズを変更するにはどうすればよいですか？クロスブラウザソリューションはありますか？

4

6 に答える 6

13 
image-rendering: -webkit-optimize-contrast; /* webkit */
image-rendering: -moz-crisp-edges /* Firefox */

http://phrogz.net/tmp/canvas_image_zoom.htmlでは、キャンバスとgetImageData. 要するに：

// Create an offscreen canvas, draw an image to it, and fetch the pixels
var offtx = document.createElement('canvas').getContext('2d');
offtx.drawImage(img1,0,0);
var imgData = offtx.getImageData(0,0,img1.width,img1.height).data;

// Draw the zoomed-up pixels to a different canvas context
for (var x=0;x<img1.width;++x){
  for (var y=0;y<img1.height;++y){
    // Find the starting index in the one-dimensional image data
    var i = (y*img1.width + x)*4;
    var r = imgData[i  ];
    var g = imgData[i+1];
    var b = imgData[i+2];
    var a = imgData[i+3];
    ctx2.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
    ctx2.fillRect(x*zoom,y*zoom,zoom,zoom);
  }
}

詳細:画像レンダリングに関する MDN ドキュメント

于 2011-10-19T00:53:41.833 に答える
5

少し前に、ImageData を使用して NN サイズ変更スクリプトを作成しました (1794 行あたり)。

https://github.com/arahaya/ImageFilters.js/blob/master/imagefilters.js

ここでデモを見ることができます

http://www.arahaya.com/imagefilters/

残念ながら、組み込みのサイズ変更は少し速くなるはずです。

于 2011-10-20T23:29:57.523 に答える
-1

組み込みの方法はありません。で自分で行う必要がありますgetImageData。

于 2011-10-18T15:03:38.770 に答える
-1

ポール・アイリッシュのコメントに基づく:

function resizeBase64(base64, zoom) {
    return new Promise(function(resolve, reject) {
        var img = document.createElement("img");

        // once image loaded, resize it
        img.onload = function() {
            // get image size
            var imageWidth = img.width;
            var imageHeight = img.height;

            // create and draw image to our first offscreen canvas
            var canvas1 = document.createElement("canvas");
            canvas1.width = imageWidth;
            canvas1.height = imageHeight;
            var ctx1 = canvas1.getContext("2d");
            ctx1.drawImage(this, 0, 0, imageWidth, imageHeight);

            // get pixel data from first canvas
            var imgData = ctx1.getImageData(0, 0, imageWidth, imageHeight).data;

            // create second offscreen canvas at the zoomed size
            var canvas2 = document.createElement("canvas");
            canvas2.width = imageWidth * zoom;
            canvas2.height = imageHeight * zoom;
            var ctx2 = canvas2.getContext("2d");

            // draw the zoomed-up pixels to a the second canvas
            for (var x = 0; x < imageWidth; ++x) {
                for (var y = 0; y < imageHeight; ++y) {
                    // find the starting index in the one-dimensional image data
                    var i = (y * imageWidth + x) * 4;
                    var r = imgData[i];
                    var g = imgData[i + 1];
                    var b = imgData[i + 2];
                    var a = imgData[i + 3];
                    ctx2.fillStyle = "rgba(" + r + "," + g + "," + b + "," + a / 255 + ")";
                    ctx2.fillRect(x * zoom, y * zoom, zoom, zoom);
                }
            }

            // resolve promise with the zoomed base64 image data
            var dataURI = canvas2.toDataURL();
            resolve(dataURI);
        };
        img.onerror = function(error) {
            reject(error);
        };
        // set the img soruce
        img.src = base64;
    });
}

resizeBase64(src, 4).then(function(zoomedSrc) {
    console.log(zoomedSrc);
});

https://jsfiddle.net/djhyquon/69/

于 2019-05-02T12:48:58.127 に答える