写法如下：img.bg { /* Set rules to fill background */ min-height: 100% min-width: 1024px /* Set up proportionate scaling */ width: 100% height: auto /* Set up positioning */ position: fixed top: 0 left: 0}@media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg {left: 50% margin-left: -512px /* 50% */ }}
多媒体：之前曾经介绍过，在HTML5中可以通过<video>标签在网页中播放影片，且不需要再安装额外的插件，此功能已经带给用户极大的便利。但基本的<video>标签只提供了简单功能的播放器界面，如果想要改变播放器的外观和功能，只能结合<canvas>标签和javascript语句，就能制作出酷炫的播放控制器。
{drawImage}
画布canvas如何与视频video标签结合，达到制作各种视频功能的效果呢？其秘诀在于通过画布重新描绘一次视频的内容，将视频的每个画面都转换成画布的图像，这样就可以通过javascript语言所提供的图像控制方法来 *** 控它们。所以炫酷播放器所使用的视频功能，并不针对video，而是针对描绘出影像的canvas。
能够描绘影像到画布中的方法是“drawImage"，此方法允许在canvas中插入画布（canvas），图像（img）和视频（video）等元素。
drawImage方法有三种：
drawImage（image，dx，dy）//原比例绘制图像
drawImage（image，dx，dy，dw，dh）//按设置长宽绘制图像
drawImage（image，sx，sy，sw，sh，dx，dy，dw，dh）//裁切后绘制图像
本文实例讲述了PHP实现将HTML5中Canvas图像保存到服务器的方法。分享给大家供大家参考。具体实现方法如下：一、问题：
在几年前HTML5还没有流行的时候，我们的项目经理曾经向我提出这样一个需求：让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名。这需要我们评审软件里提供这样一个功能：打开浏览器，登录，进入评审意见页，页面最下部有个方块区域，用户在这里用触摸笔进行签名，然后这个签名将会保持的服务器上。
这样的一个需求在当时是让我大费周折，但如今想起来，如果用html5的canvas实现，真是太简单了。在《在HTML5
Canvas中放入图片和保存为图片的方法》这篇文章里就实现了这一功能。
二、解决方法：
之前说了很多如何将canvas图像保存成图片并下载的方法，但这些方法都是将图片保存到客户端，而我们的签名需求是需要将canvas的内容保存到服务器端，如何实现？
其实很简单，看完下面的这段PHP代码，相信你也会觉得很简单。
复制代码
代码如下:<?php
//
requires
php5
define('UPLOAD_DIR',
'images/')
$img
=
$_POST['img']
$img
=
str_replace('data:image/pngbase64,',
'',
$img)
$img
=
str_replace('
',
'+',
$img)
$data
=
base64_decode($img)
$file
=
UPLOAD_DIR
.
uniqid()
.
'.png'
$success
=
file_put_contents($file,
$data)
$success
?
$file
:
'Unable
to
save
the
file.'
?>
从网页上传到服务器端的图片是base64_encode转码过的Data
URL格式，数据在服务器端用base64_decode进行解码，保存成文件。
或许有一天你也会需要用到它的，觉得很有用的话就收藏一下吧！
希望本文所述对大家的PHP程序设计有所帮助。
制作图片的放大效果我考虑到的方法是将原始图片绘制到canvas上，然后在对canvas进行局部裁剪最后对裁剪的部分进行放大，这样就可以实现放大镜的效果。
这里我给出一个实现这个想法的示例。该示例实际上就是运用HTML5 canvas中对画布进行裁剪与保存画布状态的相关知识实现的。
上面是给出示例的效果图。这是不是你想要的放大镜效果呢？
下面我们来看下示例代码：在这个示例中当你点击图片时图片就会出现上图效果，再一次点击时就变成原始图片了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>放大镜</title>
<!—HTML代码设计：一个简单的canvas元素-->
</head>
<body>
<div id="result-stub" class="well hidden">
<canvas id="canvas" width="345" height="345">
<p>你的浏览器不支持canvas元素</p>
</canvas>
</div>
<script>
window.onload=function() {
//获取canvas对象以及图片对象
var
canvas = document.getElementById('canvas'),
img = new Image(),
context = null,
dataUrl = null,
//设置一个标记，该标记的作用是控制我们点击canvas时放大镜效果的消失和出现
isMagnified = false,
//init函数只要是在图片加载时绘制出图形
init = function() {
img.onload = function() {
//绘制原始图片
context.drawImage(img, 0, 0)
//将图片信息转化为二进制信息或者URL信息存储在dataUrl中方便后面调用
dataUrl = canvas.toDataURL()
}
img.src = 'fist-pump-baby.jpg'
//设置标记值
isMagnified = false
},
//magnify函数的作用是绘制具有放大镜效果的图形
magnify = function() {
//保存当前画布的绘制状态即画布绘制原始图片的状态。方便我们在后面恢复到绘制原始图片的状态
context.save()
//因为放大镜的圆圈和把手是通过canvas绘制的这里设置了一些绘制把手和圆圈的样式属性。
context.lineWidth = 10// 线条宽度
context.shadowColor = '#000'// 阴影的颜色黑色
context.shadowBlur = 15// 模糊级别为15
context.shadowOffsetX = 5// 形状与阴影的水平距离5
context.shadowOffsetY = 5// 形状与阴影的垂直距离5
//保存画布当前状态即我们设置阴影属性后的状态方便后面使用
context.save()
//绘制出放大镜把手的图形
context.beginPath()
context.moveTo(230, 230)
context.lineCap = 'round'
context.lineWidth = 30
context.lineTo(285, 285)
context.stroke()
//对图片进行裁剪，裁剪出的图形是一个圆形。
context.beginPath()
context.arc(
150,
150,
115,
0,
Math.PI * 2,
true)
context.clip()
//创建一个新的Image对象，这个Image对象的图片资源是前面存储在dataUrl中的图片资源。所以这个Image对象和之前初始化的Image对象是完全一样的。
var magnified = new Image()
magnified.src = dataUrl
//对Image对象进行放大1.5倍，并进行绘制。注意此时的画布状态时裁剪为一个圆形的状态，所以这里绘制的也仅仅是图片中的一个圆形区域。这里为了绘制出图片中娃娃的脸设置了绘制的图片有一定的偏移量。
context.scale(1.5, 1.5)
context.drawImage(img, -40, -40)
//调用restore()函数将画布状态恢复到绘制把放大镜把手时的状态，即具有阴影属性
context.restore()
//绘制放大镜的圆圈，即绘制刚刚我们裁剪出来图片的边框。这样刚刚裁剪出来的圆形图形就会正好处于放大镜的圆圈中。
context.arc(
150,
150,
115,
0,
Math.PI * 2,
true)
context.stroke()
//重置画布，将画布恢复到绘制元素图片的状态，以方便绘制出放大效果后，再次点击是绘制原始图片。
context.restore()；
//设置标记值，实现点击后放大效果消失。
isMagnified = true
}
//加载初始化代码，即当运行页面时会在页面绘制出一个原始图像
init()
//监听画布的点击事件，当点击页面的图像时会根据标记的值来进行判断是否对画布进行方大处理
$('canvas').click(function() {
if (isMagnified) {
init()//绘制原始图像
}
else {
magnify()//绘制放大的图像
}
})
}
</script>
<script src="jquery.js"></script>
</body>
</html>
对于这些知识在一个叫秒秒学的教程网站上有相关的学习资料，有兴趣的可以自己去看看，希望对你有帮助。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）