canvas 圖片滑鼠區域放大細節
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>圖片滑鼠區域放大細節</title> </head> <style> body{background: #666;margin: 0;padding: 0; } input{ display: block; margin: 20px auto; } </style> <body> <canvas id="kycanvas" style="display: block;margin:0 auto; border: 1px solid darksalmon;margin-top: 100px;"> 當前瀏覽器不支援canvas,請更換瀏覽器後再試! </canvas> <canvas id="offCanvas" style="display: none;"></canvas> </body> <script> var canvas = document.getElementById("kycanvas");//選取畫布 var context = canvas.getContext("2d");//建立context物件 var offCanvas = document.getElementById("offCanvas");//選取畫布 var offContext = offCanvas.getContext("2d");//建立context物件 var scale; var image = new Image(); var isMouseDown = false; window.onload = function (){ canvas.width = 400;//畫布寬 canvas.height = 400; //畫布高 image.src = "images/im1.jpg";//圖片地址 image.onload = function(){ //圖片載入完畢 offCanvas.width = image.width; offCanvas.height = image.height; scale = offCanvas.width / canvas.width; context.drawImage(image,0,0,canvas.width,canvas.height); offContext.drawImage(image,0,0); }; }; function windowToCanvas(x,y){//獲取畫布上座標點 var bbox = canvas.getBoundingClientRect(); return { x : x - bbox.left , y : y - bbox.top }; }; canvas.onmousedown = function (e){ e.preventDefault(); //去預設事件 var point = windowToCanvas(e.clientX , e.clientY); console.log(point.x , point.y); isMouseDown = true; drawCanvasWithMagnifier(true , point) }; canvas.onmousemove = function (e){ e.preventDefault(); //去預設事件 if(isMouseDown == true){ var point = windowToCanvas(e.clientX , e.clientY); console.log(point.x , point.y); drawCanvasWithMagnifier(true , point) } }; canvas.onmouseup = function (e){ e.preventDefault(); //去預設事件 isMouseDown = false; drawCanvasWithMagnifier(false); }; canvas.onmouseout = function (e){ e.preventDefault(); //去預設事件 isMouseDown = false; drawCanvasWithMagnifier(false); }; function drawCanvasWithMagnifier(isShowMagnifier , point){ context.clearRect(0,0,canvas.width,canvas.height); context.drawImage(image,0,0,canvas.width,canvas.height); if(isShowMagnifier == true){ drawMagnifier(point); } } function drawMagnifier(point){ var imageLG_cx = point.x * scale; var imageLG_cy = point.y * scale; var mr = 100; var sx = imageLG_cx - mr; var sy = imageLG_cy - mr; var dx = point.x - mr; var dy = point.y - mr; context.drawImage(offCanvas, sx , sy , 2*mr , 2*mr , dx , dy , 2*mr , 2*mr); } </script> </html>
相關推薦
canvas 圖片滑鼠區域放大細節
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>圖片滑鼠區域放大細節</title> </hea
css3偽放大鏡(圖片放大動畫)效果(鼠標移入圓形區域放大圖片)
left 部分 nor 圓形區域 url poi 代碼 after con 源碼: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t
canvas圖片壓縮,局部放大,像素處理
數組 doc photo clas typeof oct 畫布 reader 順序 直接上代碼:(具體看註釋) 需要引用jquery.min.js <!DOCTYPE html> <html lang="en"> <head>
QMl中實現通過滑鼠滾輪放大、縮小圖片
import QtQuick 2.7 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.0 import QtQuick.Controls
js圖片拖拽檢視並滑動滑鼠可放大縮小
<style type="text/css"> body{background-color:#555;color:#fff;} a img{border:none;} #imageView_container{border:2px solid #000;margin:0 auto;} #imag
滑鼠經過,產品圖片的區域性放大
原理:兩張圖片,大div包含兩個圖片的div,大圖片隱藏 找到物件 var box = document.getElementById("box");//大的盒子模組 var smallBox = document.getElementById("smallBox");
縮圖滑鼠經過放大(Element表格迴圈輸出多張圖片)
1.程式碼: <template> <el-popover placement="left" ti
android 圖片雙擊放大倍數的算法
ack 過大 保留 trac scale max nbsp pos ini 圖片雙擊放大倍數和圖片大小、顯示圖片的view大小。及圖片當前的scale大小均有關系。 為了避免圖片放大過大。設置了一個放大倍數的最大限制SCALE_LIMIT,眼下該值為4. 詳細算法例
【筆記】canvas圖片預加載及進度條的實現
函數 style uil 圖片加載 mage code 重繪 執行 ces /*star *loading模塊 *實現圖片的預加載,並顯示進度條 *參數:圖片數組對象,加載完成的回調函數 */ function loadImages(sources,c
h5 canvas 圖片上傳操作
ini eal object oninput firefox agent tco false str 最近寫的小 demo,使用的是h5的 canvas來對圖片進行放大,移動,剪裁等等這是最原始的代碼,比較接近我的思路,後續會再對格式和結構進行優化 html: 1
iOS 圖片點擊放大, 再次點擊縮小
mage 點擊事件 can edi 點擊 ini 一個 cli spa XWScanImage 是一個自定義的類, 評論留Q 發 ImageView = [[UIImageView alloc]init]; ImageView.background
實現點擊圖片不同區域響應不同的事件
位置 轉換 unit 點擊 yun 單元 cgpoint use float 最近有一個遙控器的項目, 需要實現點擊圖片上指定位置響應不同事件 圖片如下: 大概目的是點擊圖片上的溫度可以直接改變空調溫度 大概思路就是先通過gesture獲取點擊的點坐標, 然後對坐標做處
記錄一下ionic canvas圖片
see div canvas 文本 更改 參考 cPage nts pri import { Component, Inject, forwardRef } from ‘@angular/core‘; import { IonicPage, NavController,
圖片點擊放大,再次點擊回到原來狀態(圖片縮放)
點擊事件 nbsp 尺寸 狀態 調用 ges cnblogs view tps 1.生成一個類,繼承自UIView(ScalePictures),在這個類的.h中聲明一個類方法: +(void)scanBigImageView:(UIImageView *)currentI
canvas圖片跨域問題
context raw cross sso 並且 wid get gin cti canvas的drawImage使用跨域圖片時候,會報錯,解決方法如下: 1. 使用base64替換跨域圖片 如果圖片不大,且只有幾張,可以使用base64,來代替跨域引用圖片。 2. 設置i
小程序圖片選擇區域/等屏裁剪實現方法
class bsp create util 什麽 ems iyu touch als 效果圖 HTML代碼 <view class="index_all_box"> <view class="imgCut_header"> <vie
Study 2 —— 圖片熱點區域
ref 標記 coo 劃分 use 表示 映射 語法 作用 標記<map>和<area><img src="圖片" usemap="#名稱"><map id="#名稱"> <area shape="rect" co
Android------實現圖片雙擊放大,縮小,左右滑動的多種方式
params getcount androi nullable per try out 多圖 tro 項目中常常有圖片瀏覽功能。像微信朋友圈圖片瀏覽,QQ空間照片瀏覽 的功能。 實現圖片雙擊放大,縮小,左右滑動等效果。 來看看我的效果圖,希望能滿足你的要求 前
Canvas-圖片旋轉
旋轉 mage contex font 了解 獲取 document 一半 屬性 Canvas-圖片旋轉 眾所周知canvas是位圖,你可以在裏面渲染你要的東西,不過你只能操作canvas的屬性來進行編輯。就是說你並不能操作畫進canvas的東西,例如我在canvas裏添
fancybox——圖片點擊放大插件
for {} script array cfi class 放大 http .com 一、加載文件 1 <link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.0.47/jquery.fa