Question

我有一个问题，我需要旋转图像，但我只有图像数据网址可用。

我需要做的是首先旋转图像然后将其加载到画布中，在将图像加载到画布后我无法旋转图像。

如果您只有image data url，是否可以旋转图像。

Answer 1

是的，是的。

var canvas = document.createElement('canvas');

canvas.width="1000"; //specify width of your canvas
canvas.height="1000"; //specify height of your canvas
var img = document.createElement("img"); 
img.src = "image.png"; //specify url

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

ctx.rotate(90 * Math.PI/180); // rotate by 90 degrees
ctx.drawImage(img,100,100); //draw it
ctx.fill();
document.body.appendChild(canvas); // display it!

Answer 2

您可以反转以下函数以从字节获取位图/像素。这是基于this example从this guide获取的。在你有了像素后，旧学校一次旋转一个像素。我包括一个例子（但在C ++中抱歉！）如何一次旋转一个像素。然后使用与下面相同的逻辑再次生成图像数据URL。

 window.generateBitmapDataURL = function(rows, scale) {
        // Expects rows starting in bottom left
        // formatted like this: [[[255, 0, 0], [255, 255, 0], ...], ...]
        // which represents: [[red, yellow, ...], ...]

        if (!window.btoa) {
            alert('Oh no, your browser does not support base64 encoding - window.btoa()!!');
            return false;
        }

        scale = scale || 1;
        if (scale != 1) {
            rows = _scaleRows(rows, scale);
        }

        var height = rows.length,                                // the number of rows
            width = height ? rows[0].length : 0,                 // the number of columns per row
            row_padding = (4 - (width * 3) % 4) % 4,             // pad each row to a multiple of 4 bytes
            num_data_bytes = (width * 3 + row_padding) * height, // size in bytes of BMP data
            num_file_bytes = 54 + num_data_bytes,                // full header size (offset) + size of data
            file;

        height = _asLittleEndianHex(height, 4);
        width = _asLittleEndianHex(width, 4);
        num_data_bytes = _asLittleEndianHex(num_data_bytes, 4);
        num_file_bytes = _asLittleEndianHex(num_file_bytes, 4);

        // these are the actual bytes of the file...

        file = ('BM' +               // "Magic Number"
                num_file_bytes +     // size of the file (bytes)*
                '\x00\x00' +         // reserved
                '\x00\x00' +         // reserved
                '\x36\x00\x00\x00' + // offset of where BMP data lives (54 bytes)
                '\x28\x00\x00\x00' + // number of remaining bytes in header from here (40 bytes)
                width +              // the width of the bitmap in pixels*
                height +             // the height of the bitmap in pixels*
                '\x01\x00' +         // the number of color planes (1)
                '\x18\x00' +         // 24 bits / pixel
                '\x00\x00\x00\x00' + // No compression (0)
                num_data_bytes +     // size of the BMP data (bytes)*
                '\x13\x0B\x00\x00' + // 2835 pixels/meter - horizontal resolution
                '\x13\x0B\x00\x00' + // 2835 pixels/meter - the vertical resolution
                '\x00\x00\x00\x00' + // Number of colors in the palette (keep 0 for 24-bit)
                '\x00\x00\x00\x00' + // 0 important colors (means all colors are important)
                _collapseData(rows, row_padding)
               );

        return 'data:image/bmp;base64,' + btoa(file);
    };

这是如何旋转从this example获取的像素。

//Open the source and create the destination bitmap 
Graphics::TBitmap *SrcBitmap=new Graphics::TBitmap; 
Graphics::TBitmap *DestBitmap=new Graphics::TBitmap; 
SrcBitmap->LoadFromFile("YourBitmap.bmp");

//rotate by 90° 

DestBitmap->Width=SrcBitmap->Height; 
DestBitmap->Height=SrcBitmap->Width; 

//Rotate one pixel at a time 
for (int x=0;x<SrcBitmap->Width;x++) 
{ 
  for(int y=0;y<SrcBitmap->Height;y++) 
  { 
    DestBitmap->Canvas->Pixels[y][SrcBitmap->Width-1-x]= 
       SrcBitmap->Canvas->Pixels[x][y]; 
  } 
} 

//Assign the Destination bitmap to a TImage 
Image1->Picture->Bitmap=DestBitmap; 
delete DestBitmap; 
delete SrcBitmap;

Answer 3

有一个简单的功能来旋转数据URL图像。即使您的图像的宽度和高度与nicael答案中的宽度和高度不相同，它也能正常工作。

var src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/wAALCAAmACgBAREA/8QAGQAAAgMBAAAAAAAAAAAAAAAABggAAwcJ/8QAKRAAAQMDAwMEAgMAAAAAAAAAAQIDBAAFEQcSIQYTMTJBUYEUoSIjkf/aAAgBAQAAPwDpRVUuWzAjOSJDqWWGxuW4s4CRQDK1usTc5Edht99BWEqkKGxtIz5+cfVH8eQ1LYQ8w4l1lwbkrQchQ+QasqUAa2vdvolSd+0rkNjGfUOTS/Uweijxc6HbSV7tj7iQM52jg4o9qUE6vWJd66PeW0krehqEhKR7gcK/RJ+qXWmN0ksSrJ0bHLgKXpajIUD7A+n9Af7RnVUmUzDZU8+6hlpPKluKCQPs1l2ouq9tds8q22h5UmQ8O2p9Kf60pPqwT5OOOKxWtw0/1XtZtEK3XR8xJbKA13XE4bUBwnkeOMea0xh9qS0l1lxLrahlK0KBB+6XjVq9TZ/WE+I8+tUWMsIaZz/FPAOcfPPmgqpUo+0cvU2J1bGgofX+HISvuMk5SSEkggex4r//2Q=="

var img_src = document.createElement('img')
img_src.src = src
document.getElementById('container').appendChild(img_src)


rotate90(src,function(res){
   var img_res = document.createElement('img')
   img_res.src = res
   document.getElementById('container').appendChild(img_res)
})

function rotate90(src, callback){
  var img = new Image()
  img.src = src
  img.onload = function() {
    var canvas = document.createElement('canvas')
    canvas.width = img.height
    canvas.height = img.width
    canvas.style.position = "absolute"
    var ctx = canvas.getContext("2d")
    ctx.translate(img.height, img.width / img.height)
    ctx.rotate(Math.PI / 2)
    ctx.drawImage(img, 0, 0)
    callback(canvas.toDataURL())
  }
}

<div id="container"></div>

此外，您可以尝试here

如果你只有使用javascript的图像数据网址，是否可以旋转图像？

3 个答案: