在打开的记事本中输入HTML代码，如下图：
编辑完HTML文件后，选择【文件】-->【保存】或按Ctrl+S组合键，在d出的【另存为】对话框中选择【保存类型】为【所有文件】，然后将文件扩展名设为.html或.htm.如下图：
步骤阅读
4
单击【保存】，保存文件。浏览器的预览效果请移步另一篇分享经验【使用浏览器查看HTML5文件】
本文实例讲述了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程序设计有所帮助。
可以使用HTML5的localStorage来实现
参考代码如下：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入值" onchange="changeValue(this)"><button onclick="saveValue()">保存值</button>
<script>
var input = document.getElementsByTagName("input")[0]
input.value = localStorage.getItem("key")
function changeValue(e) {
localStorage.setItem("key",e.value)
window.confirm("保存成功")
}
function saveValue() {
let val = document.getElementsByTagName("input")[0].value
localStorage.setItem("key",val)
window.confirm("保存成功")
}
</script>
</body>
</html>
效果：
再次刷新页面
查看localStroage
代码仅供参考
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）