1. 程式人生 > >canvas 圖片滑鼠區域放大細節

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