利用canvas裁剪想要的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.9.1.min.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<style>
#container {
display: inline-block;
position: relative;
} .mask {
background: black;
opacity: 0.3;
border: 1px solid green;
width: 150px;
height: 150px;
left: 0;
top: 0;
z-index: 22;
position: absolute;
}
</style> </head>
<body> <input type="file" id="imgInp">
<br>
<span id="container">
<div class="mask"></div>
<img id="tulip">
</span>
<br>
<canvas id="myCanvas" width="150px" height="150px"></canvas>
<br>
<button id="caijian" onclick="cai()">裁剪</button>
<script src="vconsole.min.js"></script>
<script>
var con=new VConsole();
var c = ""
var ctx =""
window.iiix = 0;
window.iiiy = 0;
function cai() { caijian(window.iiix, window.iiiy)
//console.log(c.toDataURL("image/png"))
} function ImgZoom(Id)
{
var w = Id.width;
var m = 350;
if(w < m)
{
return;
}
else
{
var h = Id.height;
Id.height = parseInt(h*m/w);
Id.width = m;
}
} function caijian(sx, sy) {
c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, sx, sy, 150, 150, 0, 0,150,150);
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#tulip').attr('src', e.target.result);
var img=new Image()
img.src=e.target.result console.log(img.naturalWidth)
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function () {
readURL(this);
});
/* $(".mask").mousedown(function () {
onMouseU55p()
onMouseDow555n()
});*/
var mask=document.getElementsByClassName("mask")[0];
function onMouseDow555n() {
mask.addEventListener("touchmove",onMouseMove,false);
onMouseU55p();
}
function onMouseU55p() {
mask.addEventListener("touchend",function(){
mask.removeEventListener("touchmove",onMouseMove);
},false);
} mask.addEventListener("touchstart",function(e){
onMouseDow555n()
},false); /* $(".mask").mousedown(function () {
onMouseUp()
onMouseDown()
});
function onMouseDown() {
$(".mask").bind("mousemove", onMouseMove)
}
function onMouseUp() {
$(".mask").bind("mouseup", function () {
$(".mask").unbind("mousemove", onMouseMove)
})
}*/ function onMouseMove(event) {
var top = $(this).position().top
var left = $(this).position().left
//console.log(top,left);
//边界
//left
var leftlimit = $(this).parent().width() - $(this).width();
var toplimit = $(this).parent().height() - $(this).height();
//console.log(leftlimit,toplimit);
//这里可以得到鼠标Y坐标
/* var pointX = e.pageX;screenX
var pointY = e.pageY;*/ var pointX = event.targetTouches[0].pageX;
var pointY = event.targetTouches[0].pageY;
console.log(pointX, pointY); //父元素的坐标
var parentX = $(this).parent().offset().left;
var parentY = $(this).parent().offset().top; console.log("父", parentX, parentY);
var realX = pointX - parentX;
var realY = pointY - parentY;
window.iiix = realX - $(this).width() / 2
window.iiiy = realY - $(this).height() / 2
console.log("实", window.iiix, window.iiiy);
var itemX = realX - $(this).width() / 2
var itemY = realY - $(this).height() / 2
if (realX >= leftlimit + $(this).width() / 2) {
itemX = leftlimit
}
if (realY >= toplimit + $(this).height() / 2) {
itemY = toplimit
}
if (realX <= $(this).width() / 2) {
itemX = 0
}
if (realY <= $(this).height() / 2) {
itemY = 0
} $(this).css("top", itemY)
$(this).css("left", itemX) //鼠标的位置 } </script>
</body>
</html>
利用canvas裁剪想要的图片的更多相关文章
- 小程序canvas生成二维码图片踩的坑
1:生成临时图片,保证画布被加载以及渲染(即本身不可以 hidden 或是 上级元素不可以 hidden 或是 wx:if 隐藏等) == > 建议:因为 canvas 的组件层级(z-inde ...
- 利用canvas制作图片(可缩放和平移)+相框+文字
前言: 公司一个售前问我能不能用H5做一个手机拍照,给相片添加相框和添加文字上传到服务器的功能,我当时一琢磨觉得可行,就利用空余时间做了一个demo,去掉了拍照和上传,如果以后有机会,会给补上,当然对 ...
- 利用canvas压缩图片
现在手机拍的照片动不动就是几M,当用户上传手机里的照片时一个消耗流量大,一个上传时间长,为了解决这个问题,就需要压缩图片: 想法:利用canvas重绘图片,保持宽高比不变,具体宽高根本具体情况而定. ...
- 如何从一张图片中裁剪一部分距形图片另存为文件(使用Canvas.CopyRect)
如何从一张图片中裁剪一部分距形图片另存为文件? Delphi / Windows SDK/APIhttp://www.delphi2007.net/DelphiMultimedia/html/delp ...
- iOS 利用Context裁剪图片
下面的代码可以裁剪出圆形的图片, 1,先把不规则图片转成正方形图片 UIGraphicsBeginImageContext(newSize); [image drawInRect:CGRectMake ...
- 利用canvas 导出图片
1.使用canvas绘制图片,并将图片导出. 在本地直接访问静态网页时,无法使用toDataURL(),需要将网页发布后,canvas才能使用toDataURL获取画布上的内容.因为canvas不允许 ...
- 小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像)
小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...
- 10分钟,利用canvas画一个小的loading界面
首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...
- 前端JS利用canvas的drawImage()对图片进行压缩
对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 1.由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致 ...
随机推荐
- 绘制矩形:描边矩形imagerectangle()、填充矩形imagefilledrectangle()
<?php //1. 绘制图像资源(创建一个画布) $image = imagecreatetruecolor(500, 300); //2. 先分配一个绿色 $green = imagecol ...
- python3.7 random模块
#!/usr/bin/env python __author__ = "lrtao2010" #python3.7 random模块 import random #随机模块 # r ...
- [项目2] 10mins
1.准备工作 M层:生成虚假数据 from django.db import models from faker import Factory # Create your models here. c ...
- R语言分析朝阳医院数据
R语言分析朝阳医院数据 本次实践通过分析朝阳医院2016年销售数据,得出“月均消费次数”.“月均消费金额”.“客单价”.“消费趋势”等结果,并据此作出可视化图形. 一.读取数据: library(op ...
- IIS6.0,Apache低版本,PHP CGI 解析漏洞
IIS6.0解析漏洞 在IIS6.0下存在这样的文件"名字.asp;名字.jpg" 代表了jpg文件可以以asp脚本类型的文件执行. 根据这个解析漏洞我们可以上传这种名字类型的图片 ...
- 用户注册,登录API 接口
Controer: <?php /** * @name UserController * @author pangee * @desc 用户控制器 */ class UserController ...
- leetcode NO.171 Excel表列序号 (python实现)
来源 https://leetcode-cn.com/problems/excel-sheet-column-number/description/ 题目描述 给定一个Excel表格中的列名称,返回其 ...
- HDU 4180 扩展欧几里得
RealPhobia Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- Vagrant Tip: Virtualbox Guest Additions
Vagrant Tip: Virtualbox Guest Additions 12 February 2016 Tired of seeing this message when you run v ...
- 感谢beyond,感谢家驹