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

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

在使用隱藏畫布上傳之前旋轉(zhuǎn)圖像

在使用隱藏畫布上傳之前旋轉(zhuǎn)圖像

慕容3067478 2023-06-09 15:28:24
我試圖在上傳之前旋轉(zhuǎn)我的圖像。我試圖在空中創(chuàng)建一個畫布,旋轉(zhuǎn)它,并在里面獲取數(shù)據(jù),但它似乎不起作用,這是一個小提琴:function rotate() {    const img = document.getElementById("image");  const canvas = document.createElement("canvas");  const context = canvas.getContext("2d");  context.rotate(90 * Math.PI / 180);  context.drawImage(img,0,0);  img.src = canvas.toDataURL();  }<img src="https://lh3.googleusercontent.com/proxy/YhFwjEreTxLoYxYc2sG_VJIp9L03YZAtQZ7FXvI46-NqSyql-rfiaLkN4G8h3Pg7fYwIYuROEBC5pBRnZPnXbgQpmB_qmCjscZ8WYKZ7Xq5j86cZRegymf_tmo2T5VdiZ-2Mfd8tXYnZXuSRh0eDBs537cmZtENW7XjLH5515uYATw" style="width: 100%; height: auto" id="image"/><button onclick="rotate()">Rotate</button>不要考慮安全錯誤。我想知道這是否是實現(xiàn)這一目標的好方法,如果不是,我怎么能在沒有任何圖書館的情況下做到這一點?
查看完整描述

1 回答

?
慕少森

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

您需要做一些原始代碼中沒有的事情:

  1. 調(diào)整畫布大小以匹配圖像。

  2. 使用 . 在畫布中心執(zhí)行旋轉(zhuǎn)context.translate()

(請注意,我在此演示中使用數(shù)據(jù) URI,以避免安全錯誤。)

function rotate() {

  const img = document.getElementById("image");

  const canvas = document.createElement("canvas");

  const context = canvas.getContext("2d");

  

  // Make canvas the same size as img

  const cw = img.naturalHeight;

  const ch = img.naturalWidth;

  canvas.width = cw;

  canvas.height = ch;

  

  // Draw rotated img onto canvas

  context.translate(cw / 2, ch / 2);

  context.rotate(90 * Math.PI / 180);

  context.drawImage(img, -ch / 2, -cw / 2, ch, cw);

  

  // Replace img with canvas contents

  img.src = canvas.toDataURL();

}

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAyCAYAAADLLVz8AAABO0lEQVRoge3bQQ7CMAxE0RRxYgSnQHDlsmWBit3xjL2Yv6VNm6cKqQls6/7alzvdxXRYBgS7Truh/Xk7/Hx7vGX3EmnUE/gPL3qMsjGAGZhJiCMAz4BMQWwHRCAmILYCVgB0I7YBVk68E7EFkDHhLkQ5IHOiHYhSQMUE1YgyQOXElNeSAEYnFHlNi77KqRDpgJV42WMViFRABl72HDYiDZCJlz2XiUgBVOBlx2AhlgMq8bJjMRBLATvwsmNWI5YBduJlx65ElL6JKJbj1Uv+MkDlxJTXkgB2bASprkkH7NxFU1ybCjhhC5J9D2X7wtP2a79j3pt/mQBmQDADghkQzIBgBgQzIJgBwQwIZkAwA4IZEMyAYAYEMyCYAcEMCDYO8Gj1eOKq98gn8BfU1C0D/90VzN+BYAZEWmt9ABoSb1fIlzNVAAAAAElFTkSuQmCC" style="width: 100%; max-width: 150px; height: auto" id="image" />

<br />

<button onclick="rotate()">

Rotate

</button>


查看完整回答
反對 回復 2023-06-09
  • 1 回答
  • 0 關注
  • 105 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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