canvas實現圖片圍繞左上角一點進行旋轉

阿新 • • 發佈：2018-11-05

canvas插入圖片，需要先在onload事件中預載入圖片，然後在用drawImage（）方法插入圖片。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="button" value="逆時針" />
        <input type="button" value 
="順時針" />
        <div id="">
            <img src="img/code.jpg" id="myimg"/>
        </div>
    </body>
    <script>
        window.onload = function(){
            var aInput = document.getElementsByTagName('input');
            var oImg = document.getElementById('myimg' 
);

            var yImg = new Image();
            var isNow = 0;

            yImg.onload = function(){
                draw(oImg);
            }

            yImg.src = oImg.src;

            function draw(obj){
                var oC = document.createElement('canvas');//建立canvas節點用來替換img節點
                var 
 oGc = oC.getContext('2d');
                //將canvas的寬高和圖片寬高設定成一樣的
                oC.width = obj.width; 
                oC.height = obj.height;

                obj.parentNode.replaceChild(oC,obj);
                oGc.drawImage(obj,0,0);

                aInput[0].onclick = function(){
                    if (isNow == 0) {
                        isNow = 3;
                    } else{
                        isNow--;
                    }
                    tochange();
                }
                aInput[1].onclick = function(){
                    if (isNow ==3) {
                        isNow = 0;
                    } else{
                        isNow++;
                    }
                    tochange();
                }

                function tochange(){
                switch (isNow){
                    case 0:
                        oC.width = obj.width;
                        oC.height = obj.height;
                        oGc.rotate(0);
                        oGc.drawImage(obj,0,0);
                        break;
                    case 1:
                        oC.width = obj.height;
                        oC.height = obj.width;
                        oGc.rotate(90*Math.PI/180);
                        oGc.drawImage(obj,0,-obj.height);
                        break;  
                    case 2:
                        oC.width = obj.width;
                        oC.height = obj.height;
                        oGc.rotate(180*Math.PI/180);
                        oGc.drawImage(obj,-obj.width,-obj.height);
                        break;
                    case 3:
                        oC.width = obj.height;
                        oC.height = obj.width;
                        oGc.rotate(270*Math.PI/180);
                        oGc.drawImage(obj,-obj.width,0);
                        break;
                    default:
                        break;
                }
            }
            }   
        }
    </script>
</html>

canvas實現圖片圍繞左上角一點進行旋轉

canvas插入圖片，需要先在onload事件中預載入圖片，然後在用drawImage（）方法插入圖片。 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

趙雅智_運用Bitmap和Canvas實現圖片顯示，縮小，旋轉，水印

bitmap raw 圖形 res efault ast bmp 運用放置上一篇已經介紹了Android種Bitmap和Canvas的使用，以下我們來寫一個詳細實例 http://blog.csdn.net/zhaoyazhi2129/article/details

canvas實現圖片旋轉縮放

canvas實現圖片旋轉，用到的基本函式： rotate（）實現旋轉； scale（X,Y）實現縮放，X代表水平縮放，Y代表垂直縮放； translate（X,Y）為畫布的變換矩陣新增水平的和垂直的偏移；基本思路：用rotate（）方法實現圖片旋轉，用scale（）實現縮放。

HTML5 file API加canvas實現圖片前端JS壓縮並上傳（轉載）

www. 手機回調 pre lan 瀏覽器中 rdp 效果二進制一、圖片上傳前端壓縮的現實意義對於大尺寸圖片的上傳，在前端進行壓縮除了省流量外，最大的意義是極大的提高了用戶體驗。這種體驗包括兩方面：由於上傳圖片尺寸比較小，因此上傳速度會比較快，交互會更

學習 | canvas實現圖片懶加載 && 下滑底部加載

window back mov code 圖片 wim .com rod pro 　　用canvas實現圖片的懶加載並且下滑到據底部60px的時候再次加載數據，模仿UC瀏覽器的新聞加載。　　完整代碼：https://github.com/dirkhe1051931999

html5 用canvas實現圖片自動滑動切換

轉自：http://blog.csdn.net/iamke1987/article/details/9886707 圖片自動滑動效果很多網站都要用，最近在學html5就拿這個練練手，發現用canvas實現起來其實很簡單。程式碼比較粗糙，有很多改進的地方，不過還是先記錄一

Jcrop外掛+Canvas實現圖片上傳預覽+圖片裁剪上傳

前言想實現一個功能：使用者點選上傳按鈕，選擇圖片後。圖片顯示在一個彈出框上，並可以對圖片進行裁剪。裁剪後的圖片顯示在頁面上。提交表單即可上傳圖片。遇到問題瀏覽器的安全設定不讓使用者獲取上傳的圖片路徑，實際獲取的是c:\fakepath\a.jp

基於canvas實現圖片壓縮

用法： compressImg(target.files[0], 2).then(base64 => { console.log(base64) // 在這裡實現壓縮後的上傳操作 // ... }).catch(err => { // 壓縮異常 Indicator.c

Vue 使用 Viewers 實現圖片的放大縮小、旋轉、拖拉等操作、支援多圖片

先看效果圖吧，這是單張圖片的。放大縮小支援滑鼠滾軸操作。具體的操作首先Vue需要安裝外掛 npm install v-viewer --save 或者 cnpm install v-viewe

js加canvas實現圖片的預覽壓縮和上傳

先來一張效果圖，壓壓驚第一步：使用者選擇需要上傳的圖片<input type="file" accept="image/*" type="file"" name="imageFile" onchange="upload()">在選定了圖片後 upload 函式將被

HTML5 canvas實現圖片拉伸、壓縮與裁剪

前言：我們在網頁中經常會用到圖片展示，通常情況下會給一個固定的寬高來顯示這個圖片，然而從伺服器端上傳的圖片大小是不確定的，如果直接按預設填充這個框有時候就會特別醜orz。作為一個完(wai)美(mao)主(xie)義(hui)者，讓圖片們儘可能優美

CANVAS實現圖片模糊（處理庫StackBlur.js）

之前解決一些瀏覽器不支援CSS濾鏡模糊圖片，用的方法是SVG模糊濾鏡，但用SVG模糊濾鏡，圖片大小不好控制，每次都是邊測試邊調整寬高正好現在做的一個頁面的要求是，一張圖片，根據訪問者來顯示其狀態，沒有與此條動態互動的使用者看到的圖片是模糊的，點贊或評論後才可以見到不模糊的

HTML5+canvas實現圖片的壓縮上傳

1.圖片上傳輸入框<input type="file" name="" class="fileUpload" accept="image/*" capture="camera"/>2.上面時候觸發onchange$('.fileUpload').on('chang

canvas實現圖片尺寸等比壓縮並轉換為base64字串

最近公司的一個H5活動，搜狐新聞客戶端開機圖製作，需要使用者上傳一張圖片之後，先顯示出來再進行裁剪，然後上傳base64字串到伺服器上。但是問題來了，使用者一般上傳的圖片檔案的大小都在3-5M左右，轉成base64後提交給伺服器的話實在是太大了，到時上傳到伺服器的時候伺

JS canvas實現圖片顯示

實現不多說，直接貼程式碼方式一：用Image來設定源資料為一張圖片。從而把圖片畫出來。 function setImage() { console.log("set Image");

JS上傳圖片,利用canvas實現圖片壓縮

操作 base64 itob 思考旋轉角度基礎 inpu url 一位項目中的一個基礎功能-----手機上傳圖片技術棧： 1、利用canvas進行壓縮（這個應該都比較熟悉）2、利用exif-js獲取照片旋轉角度屬性，因為有些手機機型會因為拍照時手機的方向使拍的照片帶

canvas實現獲取圖片，並在其上面進行長度標註

功能如題，以下為具體程式碼：主要的功能還是上一個文章，實現了測量功能。直接在畫線的位置中加入程式碼即可。 bitmap2=BitmapFactory.decodeResource(getResour

用canvas實現圍繞旋轉動畫

使用canvas的convas來實現圍繞旋轉動畫，外圈順時針，裡層逆時針 html檔案 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

HTML5+Canvas+jQuery調用手機拍照功能實現圖片上傳（二）

customer mkdir 狀態保存 ont false lan else if 項目 action 上一篇僅僅講到前臺操作，這篇專門涉及到Java後臺處理。前臺通過Ajax提交將Base64編碼過的圖片數據信息傳到Java後臺，然後Java這邊進行接收處理。通過

使用canvas 的api 實現圖片的顯示及壓縮

prototype 20px 調用判斷文件類型 llb mar 打補丁需要 scrip 在移動端壓縮圖片並且上傳主要用到filereader、canvas 以及 formdata 這三個h5的api。邏輯並不難。整個過程就是：　　（1）用戶使用input file上傳

canvas實現圖片圍繞左上角一點進行旋轉

相關推薦