2016年1月 总版技术专家分月排行榜第二2015年11月 总版技术专家分月排行榜第二2015年10月 总版技术专家分月排行榜第二
优秀小版主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。如何将二维码巧妙地放进海报里？ - 知乎1908被浏览216676分享邀请回答24 条评论分享收藏感谢收起二维码out了，千面读心师奶能瞬间读出两张合成图原件！_江苏卫视吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
二维码out了，千面读心师奶能瞬间读出两张合成图原件！收藏
现在二维码的应用实在太多了，遇到疑难杂症扫一扫就能瞬间出现各种信息，让我们省了很多记忆的时间，不需要记那么多的东西，只需要用二维码扫一扫就好啦！
但是二维码的扫描仅限于资料库中有的东西，我们经常会有这样的困惑，有时候碰上见过几次的人，总不确定他就是我们认识的人，这就是传说中的脸盲症，我们总不至于拿着手机去扫描别人的脸吧！看了江苏卫视的最强大脑发现有一个人比二维码牛叉很多，她能过目不忘，尤其是对人脸，而且还能快速识别两张合成的人脸，太厉害了！
看到这位香港的挑战者李玉娟在现场的挑战简直觉得太过瘾了，每一次都像在破案一样，为了测试李玉娟的非凡记忆力，节目组设置了特别的挑战模式：挑选出全球各地50人的照片，他们中间有各个年龄、肤色，男女混合。挑战过程中，嘉宾会任意挑选两张照片合成出一张新的面孔，而李玉娟需要根据这张新脸，来迅速找到这是由哪两张面孔合成的。可是不管大家怎么合成两位不相干的人，李玉娟总能很快正确说出是由哪两张面孔合成的，真心见识了这位千面师奶的超能力。
看到她的短片介绍中说她是一名普通的补习班教师，班里每一个学生她看过之后，都能记住他们的样子，并且能准确报出他们的名字。每当老师们要去买下午茶时，李玉娟总是被挑选为最合适的人选，因为全办公室的人每个人报一遍自己点的单，李玉娟不需要用笔就能把所有人的东西记住！而在生活里，她不记账、不用备忘录。只要是她见过的东西她都能过目不忘，这是多少人梦寐以求的超能力啊~~~~~~
最讨厌那些刷十五字混经验的人了
登录百度帐号推荐应用淘客网站（二）：使用Vue.js和Canvas制作二维码和商品图片的合成实例 - 简书
淘客网站（二）：使用Vue.js和Canvas制作二维码和商品图片的合成实例
本篇基本思路为：通过复制商品的图片（一般是在QQ群或者微信群），然后显示在网页的Canvas里面，再将相对应的网址生成二维码，也在Canvas显示，最终自动合成为一个图片。那么就可以复制到群里面去，图片就带有二维码了。而不用打开图像编辑软件，直接在代码里面生成。
上篇说到Flash江河日下，jQuery同样也是江河日下，技术的发展真是日新月异。在下面这个例程里面，我将使用Vue.js和Canvas制作二维码和商品图片的合成图片。所以，这篇博客可以当做是淘客网站的制作思路，也可以视为Vue.js和Canvas的基础教程。
是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。
我们首先来进行一个简单二维码生成界面。在以前，我是使用jQuery.qrcode这个插件进行二维码生成的，由于使用了Vue.js以后，我并不想那么依赖jQuery。于是我重新找了QRCanvas
这是一个用纯JavaScript编写的二维码生成器。唯一的要求是浏览器与大多数现代浏览器支持的Canvas才能工作。
在官方的例程里面非常简单：
&div id="qrcode"&&/div&
&script src="/qrcanvas"&&/script&
&!-- A slim version is not bundled with any effects. --&
&script src="/qrcanvas/dist/qrcanvas.slim.js"&&/script&
&script type="text/javascript"&
var canvas = qrcanvas({
data: 'hello, world'
document.getElementById('qrcode').appendChild(canvas);
那么我需要的场景是有一个文本输入框，填入网址以后，点击按钮生成二维码。并且我想结合Vue.js进行使用。
代码如下：
&div id="qrcode"&&/div&
&div id="app1"&
&input type="text" class="form-control" placeholder="请输入网址" id="code" v-model="code2"&
&a href="#" @click="addRow()" class="btn btn-primary"&二维码&/a&
&script src="/vue"&&/script&
&script src="/qrcanvas/dist/qrcanvas.slim.js"&&/script&
var app8 = new Vue({
el: "#app1",
methods: {
addRow: function (name) {
var _this =
if (_this.code2) {
var canvas1 = qrcanvas({
data: _this.code2,
document.getElementById("qrcode").innerHTML = '';
document.getElementById('qrcode').appendChild(canvas1);
测试通过，运行成功。
那么接下来我们再来新建一个文件，这次我希望在一个文本框里面复制图片，然后将图片放到Canvas里面。
&div class="container" id="app"&
&h1&复制图片&/h1&
&div class="input-group ma-b-10"&
&span class="input-group-addon" id="basic-addon3"&粘贴&/span&
&input ref="input" type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"&
&div class="card ma-b-10"&
&div class="card-body"&
&h4 class="card-title"&
获得&code&base64数据&/code&
v-if="base64"
class="form-control"
id="base64"
v-model="base64"&
&/textarea&
&div class="card ma-b-10"&
&div class="card-body"&
&h4 class="card-title"&
生成&code&img&/code&
&script type="text/javascript"&
var vm = new Vue({
el: '#app',
base64: ''
mounted: function () {
var _this = this
this.$refs.input.addEventListener("paste", function (e){
if ( !(e.clipboardData && e.clipboardData.items) ) {
for (var i = 0; i & e.clipboardData.items. i++) {
if (e.clipboardData.items[i].type === 'image/png'){
var pasteFile = e.clipboardData.items[i].getAsFile();
var reader = new FileReader();
reader.readAsDataURL(pasteFile);
reader.onload=function(e){
_this.base64 = this.
代码其原理就是通过获取图像数据，如果该数据是图片类型的，那么就调用 reader.readAsDataURL 将其图片显示出来。
这个功能就是可以在QQ群、微信群里面，对图片复制，我们粘贴以后就显示在网页里面。然后在结合网址生成二维码，通过代码将其合成在一起。
那么现在核心问题来了，怎么通过代码来合成两个图片呢？
在写代码的中间还是发生了很多问题，例如用base64代码我不知道怎么去获取它的尺寸，只好用#imgdiv让它显示出图片后再得出尺寸，等到合成二维码图片完成以后，我再将其隐藏掉。现在先看一下html代码：
&div class="container" id="app"&
&h1&复制图片&/h1&
&div class="input-group ma-b-10"&
&span class="input-group-addon" id="basic-addon3"&粘贴&/span&
&input ref="input" type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"&
&div class="card ma-b-10"&
&div class="card-body"&
&h4 class="card-title"&
获得base64数据
&textarea v-if="base64" class="form-control" id="base64" rows="3" v-model="base64"&
&/textarea&
&div class="card ma-b-10"&
&div class="card-body"&
&h4 class="card-title"&
&canvas id="myCanvas"&
你的浏览器不支持canvas，建议使用最新版的Chrome浏览器。
&div id="tempDiv"&&/div&
&div class="card ma-b-10"&
&div class="card-body"&
&h4 class="card-title"&
&input type="text" class="form-control" placeholder="请输入网址" id="code" v-model="code2"&&br/&
&a href="#" @click="addRow()" class="btn btn-primary"&二维码&/a&
JavaScript的代码：
var vm = new Vue({
el: '#app',
base64: '',
mounted: function () {
var _this = this
this.$refs.input.addEventListener("paste", function (e) {
if (!(e.clipboardData && e.clipboardData.items)) {
for (var i = 0; i & e.clipboardData.items. i++) {
if (e.clipboardData.items[i].type === 'image/png') {
var pasteFile = e.clipboardData.items[i].getAsFile();
var reader = new FileReader();
reader.readAsDataURL(pasteFile);
reader.onload = function (e) {
_this.base64 = this.
methods: {
addRow: function () {
var _this =
if (_this.code2) {
var canvas0 = qrcanvas({
data: _this.code2,
var image = new Image();
image.src = canvas0.toDataURL("image/png");
var img_all=new Image();
img_all.src=_this.base64;
var nWidth = document.getElementById('imgdiv').naturalW
var nHeight = document.getElementById('imgdiv').naturalH
image.setAttribute("crossOrigin", 'anonymous');
img_all.setAttribute("crossOrigin", 'anonymous');
console.log(nWidth);
console.log(nHeight);
var canvas = document.getElementById("myCanvas");
canvas.width = nW
canvas.height = nH
var ctx = canvas.getContext("2d");
ctx.rect(0,0, nWidth, nHeight);
ctx.fillStyle = "#fff";
ctx.fill();
img_all.addEventListener("load",function(){
ctx.drawImage(img_all, 0, 0, nWidth,nHeight);
image.addEventListener("load",function(){
ctx.drawImage(image, nWidth-128, nHeight-128,128,128);
imageURL = canvas.toDataURL("image/png");
var img3 = new Image();
document.getElementById('tempDiv').appendChild(img3);
img3.src = imageURL;
canvas.style.display = "none";
document.getElementById('imgdiv').style.display = "none";
其实还是写得很匆忙的，里面是有一些错漏的地方，敬请指教。最终效果如下图：