createImg(store, data) { let timer = setTimeout(function (params) { let _canvas = document.querySelector(".setPictureSection"); var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas).height);…

前段时间做了个跟裁剪相关的活动<用H5中的Canvas等技术制作海报>,这次公司要做个与奥运相关的活动,扫车牌赢奖. 于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更通用.下图是活动中裁剪的页面: 先来看看两个活动的不同: 1.原先的活动每次旋转只能90°,而此次活动可以任意角度旋转. 2.原先的活动每次旋转就会生成一段Base64数据,导致页面卡顿严重,而此次只有在裁剪的时候才生成图片. 以上两点是最大的不同,其它方面基本一致,如果碰到不明白的可以参考一下<海报制…

一.前言 写了很多h5之后,对于写手写html和css已经麻木的我决定动手写个工具自动生成h5结构和样式.其实这个想法由来已久,但总是觉得自己技术不够,所以一直没实行.直到某天我真的写够了,我决定动手了.在此也要感谢我周围的小伙伴.是波波同学告诉了我如何使用ps中的脚本批量把图层导出成图片,嘉哥告诉了我怎么裁剪png图片.站在了巨人肩膀上的我,利用这两个方法和我自己的聪明才智,经过2/3天的努力,终于完成了我的工具.个人感觉非常满意. 二.规范说明 设计稿要求为640x1006尺寸,设计人员给的…

前段时间做了个跟裁剪相关的活动<用H5中的Canvas等技术制作海报>,这次公司要做个与奥运相关的活动,扫车牌赢奖. 于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更通用.下图是活动中裁剪的页面: 先来看看两个活动的不同: 1.原先的活动每次旋转只能90°,而此次活动可以任意角度旋转. 2.原先的活动每次旋转就会生成一段Base64数据,导致页面卡顿严重,而此次只有在裁剪的时候才生成图片. 以上两点是最大的不同,其它方面基本一致,如果碰到不明白的可以参考一下<海报制…

1.h5 图片异步上传 (1) 异步上传input触发onchange事件的时候,就把图片上传至服务器.后台可能会返回图片的链接等信息,前台可以把图片信息展示给用户看. (2) 另一种情况可能需要前台自己重写提交(如下图): 显示图片的时候,添加一个type='hidden'的input框,用来存后台需要提交的东西(后台会返回,只需要用input存起来) 2.h5 图片同步上传 (1) 同步上传.把图片获取,预览出来.然后在提交服务器 (代码) /** * tinyImgUpload * @pa…

thinkphp3.2与phpexcel完美案例 // 导出exl public function look_down(){ $id = I('get.id'); $m = M ('offer_goods'); $where['offer_id'] = $id; $data = $m->field('goods_id,goods_sn,goods_name,barcode,goods_type,price')->select(); // 导出Exl import("Org.Util.…

今天客户反映,上传的图片生成缩略图有的图片变成黑色,出现问题就百度了一下,有不少网友也遇到这样的问题,但是官方论坛也没有给出解决办法,那还得靠自己解决了,于是就研究phpcms v9 图片压缩代码.打开\phpcms\libs\classes\image.class.php,看了半天也没有看出哪里的错误.网上有很多关于php  png图片压缩变成黑色的问题,我刚开始也以为是这样问题,但是v9的源码里做了这样问题的处理,所以排除这个原因.突然想到了错误日志,打开\caches\error_log.…

验证码图片生成工具,使用JAVA生成的图片验证码,调用getRandcode方法获取图片验证码,以流的方式传输到前端页面. 源码如下:(点击下载  Captcha.java) import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.util.Random; import javax.imageio.ImageIO;…

今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代码所代表含义,我这里就给出一些思路及关键代码: 1.首先使用ul li展现4张图片 本示例中不仅使用了图片,在图片表面还放置了一段“WEB”字样文字,用于与图片实现隐藏或显示效果,故html中每张图片上方加入: <div class="mytext">WEB</div&g…

一般要做正圆形图片,只能是正方形的基础上才能实现,否则就变成椭圆了,下面说说如何使长方形的图片生成正圆形图片 废话不多说,没图没真相,先上图吧: 原图:  变成正圆后:  下面上代码: public static Bitmap makeRoundCorner(Bitmap bitmap) { int width = bitmap.getWidth(); int height = bitmap.getHeight(); int left = 0, top = 0, right = width, b…