第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

JS客戶端Exif方向：旋轉(zhuǎn)和鏡像JPEG圖像

JS客戶端Exif方向：旋轉(zhuǎn)和鏡像JPEG圖像

猛跑小豬 2019-07-29 16:25:48
JS客戶端Exif方向：旋轉(zhuǎn)和鏡像JPEG圖像數(shù)碼相機照片通常以JPEG格式保存，帶有EXIF“方向”標簽。要正確顯示，需要根據(jù)設(shè)置的方向旋轉(zhuǎn)/鏡像圖像，但瀏覽器會忽略渲染圖像的信息。即使在大型商業(yè)網(wǎng)絡(luò)應(yīng)用程序中，對EXIF方向的支持也可能不穩(wěn)定1。相同的源代碼還提供 了JPEG可以具有的8種不同方向的精彩摘要：樣本圖像可在4處獲得。問題是如何在客戶端旋轉(zhuǎn)/鏡像圖像，以便正確顯示并在必要時進一步處理？有JS庫可用于解析EXIF數(shù)據(jù)，包括orientation屬性2。Flickr在解析大圖像時注意到了可能的性能問題，需要使用Web工作者3?？刂婆_工具可以正確地重新定向圖像5。解決問題的PHP腳本可在6處獲得
查看完整描述

3 回答

?
慕斯709654

TA貢獻1840條經(jīng)驗 獲得超5個贊

github項目JavaScript-Load-Image為EXIF方向問題提供了一個完整的解決方案，正確旋轉(zhuǎn)/鏡像所有8個exif方向的圖像。查看javascript exif方向的在線演示

圖像被繪制到HTML5畫布上。它的正確渲染是通過canvas操作在js / load-image-orientation.js中實現(xiàn)的。

希望這能節(jié)省一些時間，并教導(dǎo)搜索引擎關(guān)于這個開源寶石:)


查看完整回答
反對 回復(fù) 2019-07-29
?
ibeautiful

TA貢獻1993條經(jīng)驗 獲得超6個贊

Mederr的上下文轉(zhuǎn)換非常有效。如果您需要提取方向，請僅使用此功能 - 您不需要任何EXIF讀取庫。以下是在base64圖像中重新設(shè)置方向的功能。 這是一個小提琴。我還準備了一個方向提取演示的小提琴。

function resetOrientation(srcBase64, srcOrientation, callback) {
  var img = new Image();    

  img.onload = function() {
    var width = img.width,
        height = img.height,
        canvas = document.createElement('canvas'),
        ctx = canvas.getContext("2d");

    // set proper canvas dimensions before transform & export
    if (4 < srcOrientation && srcOrientation < 9) {
      canvas.width = height;
      canvas.height = width;
    } else {
      canvas.width = width;
      canvas.height = height;
    }

    // transform context before drawing image
    switch (srcOrientation) {
      case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
      case 3: ctx.transform(-1, 0, 0, -1, width, height); break;
      case 4: ctx.transform(1, 0, 0, -1, 0, height); break;
      case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
      case 6: ctx.transform(0, 1, -1, 0, height, 0); break;
      case 7: ctx.transform(0, -1, -1, 0, height, width); break;
      case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
      default: break;
    }

    // draw image
    ctx.drawImage(img, 0, 0);

    // export base64
    callback(canvas.toDataURL());
  };

  img.src = srcBase64;};


查看完整回答
反對 回復(fù) 2019-07-29
?
阿波羅的戰(zhàn)車

TA貢獻1862條經(jīng)驗 獲得超6個贊

如果

width = img.width;height = img.height;var ctx = canvas.getContext('2d');

然后，您可以使用這些轉(zhuǎn)換將圖像轉(zhuǎn)換為方向1

從方向：

  1. ctx.transform(1, 0, 0, 1, 0, 0);

  2. ctx.transform(-1, 0, 0, 1, width, 0);

  3. ctx.transform(-1, 0, 0, -1, width, height);

  4. ctx.transform(1, 0, 0, -1, 0, height);

  5. ctx.transform(0, 1, 1, 0, 0, 0);

  6. ctx.transform(0, 1, -1, 0, height, 0);

  7. ctx.transform(0, -1, -1, 0, height, width);

  8. ctx.transform(0, -1, 1, 0, 0, width);

在ctx上繪制圖像之前


查看完整回答
反對 回復(fù) 2019-07-29
  • 3 回答
  • 0 關(guān)注
  • 619 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號