『转载』『教程』Joe主题实现评论图片功能
前言
前几天在执念博客看到的功能，觉得有点用，就扒过来做个备份
成品效果
{tabs}
{tabs-pane label="前台界面"}
{/tabs-pane}
{tabs-pane label="主题开关"}
{/tabs-pane}
{/tabs}
修改教程
一、修改 comment.php 文件
修改 Joe/public/comment.php ，修改如下代码：
{tabs}
{tabs-pane label="代码"}
{hide}
<?php if ($this->options->CommentImg !== "off") : ?>
<div class="imgUpload">
<input type="file" title="上传图片" id="imgUpload_btn_file" hidden>
<input type="hidden" name="text" id="imgUpload_btn_text">
<div class="imgUpload-file">
<div class="imgUpload_btn">
<span id="imgUpload_btn_upload" title="上传图片">
<svg t="1629804953737" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2082" width="26" height="26"><path d="M740.693333 750.933333h-102.4c-20.48 0-34.133333-13.653333-34.133333-34.133333s13.653333-34.133333 34.133333-34.133333h102.4c58.026667 0 102.4-44.373333 102.4-102.4 0-47.786667-34.133333-88.746667-78.506666-98.986667-17.066667-3.413333-27.306667-20.48-27.306667-37.546667 3.413333-13.653333 3.413333-23.893333 3.413333-34.133333 0-112.64-92.16-204.8-204.8-204.8-88.746667 0-170.666667 61.44-197.973333 146.773333 0 13.653333-13.653333 23.893333-27.306667 23.893334-81.92 3.413333-146.773333 71.68-146.773333 153.6 0 85.333333 68.266667 153.6 153.6 153.6h51.2c20.48 0 34.133333 13.653333 34.133333 34.133333s-13.653333 34.133333-34.133333 34.133333H314.026667c-122.88 0-221.866667-98.986667-221.866667-221.866666 0-112.64 81.92-204.8 191.146667-218.453334 40.96-102.4 143.36-174.08 252.586666-174.08 150.186667 0 273.066667 122.88 273.066667 273.066667v13.653333c61.44 27.306667 102.4 88.746667 102.4 157.013334 0 95.573333-75.093333 170.666667-170.666667 170.666666z m-204.8 102.4V477.866667c0-13.653333-6.826667-23.893333-20.48-30.72-10.24-6.826667-23.893333-3.413333-34.133333 3.413333l-136.533333 102.4c-13.653333 10.24-17.066667 34.133333-6.826667 47.786667 10.24 13.653333 34.133333 17.066667 47.786667 6.826666l81.92-61.44v307.2c0 20.48 13.653333 34.133333 34.133333 34.133334s34.133333-13.653333 34.133333-34.133334z m129.706667-252.586666c10.24-13.653333 6.826667-37.546667-6.826667-47.786667l-34.133333-27.306667c-13.653333-10.24-37.546667-6.826667-47.786667 6.826667-10.24 13.653333-6.826667 37.546667 6.826667 47.786667l34.133333 27.306666c6.826667 3.413333 13.653333 6.826667 20.48 6.826667 10.24 0 20.48-3.413333 27.306667-13.653333z" fill="var(--theme)" p-id="2083"></path></svg>
</span>
<span id="imgUpload_btn_clear" title="清空">
<svg t="1629805039741" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3008" width="26" height="26"><path d="M897.23 333.08H657.88V122.51c0-19.76-16.08-35.84-35.84-35.84H451.77c-19.76 0-35.84 16.08-35.84 35.84v210.57H176.58c-19.76 0-35.84 16.08-35.84 35.84v109.17c0 19.76 16.08 35.84 35.84 35.84h23.23v337.9c0 19.76 16.08 35.84 35.84 35.84h602.51c19.76 0 35.84-16.08 35.84-35.84v-337.9h23.23c19.76 0 35.84-16.08 35.84-35.84V368.92c0-19.76-16.08-35.84-35.84-35.84z m-700.49 56h247.19c15.46 0 28-12.54 28-28V142.67h129.95v218.41c0 15.46 12.54 28 28 28h247.19v68.85H196.74v-68.85z m491.43 442.59V705.28c0-15.46-12.54-28-28-28s-28 12.54-28 28v126.39h-67.26V705.28c0-15.46-12.54-28-28-28s-28 12.54-28 28v126.39h-67.26V705.28c0-15.46-12.54-28-28-28s-28 12.54-28 28v126.39H255.81V513.93H818v317.74H688.17z" fill="var(--theme)" p-id="3009"></path></svg>
</span>
</div>
<div height="260">
<img style="display: none;width: 100%" id="imgUpload_img" src="">
</div>
</div>
<textarea class="text joe_owo__target" name="text" value="" autocomplete="new-password" placeholder="说点什么吧，点击右上方切换成画图或者点击上传图片试试？"></textarea>
</div>
<?php else : ?>
<div class="imgUpload">
<textarea class="text joe_owo__target" name="text" value="" autocomplete="new-password" placeholder="说点什么吧，点击右上方切换成画图试试？"></textarea>
</div>
<?php endif; ?>{/hide}
{/tabs-pane}
{tabs-pane label="修改位置"}
{/tabs-pane}
{/tabs}
二、修改 functions.php 文件
修改 Joe/functions.php 文件，底部添加如下代码：
// 评论图片
$CommentImg = new Typecho_Widget_Helper_Form_Element_Select(
'CommentImg',
array('on' => '开启（默认）', 'off' => '关闭'),
'on',
'是否开启评论图片功能',
'介绍：开启后，评论区域可以选择图片进行评论'
);
$CommentImg->setAttribute('class', 'joe_content joe_custom'); // joe_custom可改为joe_other
$form->addInput($CommentImg);
三、添加 custom.js 文件
在 Joe/assets/js 文件夹内新建 custom.js 文件，将以下代码复制进去
{tabs}
{tabs-pane label="标签一"}
{hide}
document.addEventListener('DOMContentLoaded', () => {
// 评论图片功能
$(".imgUpload #imgUpload_btn_upload").click(function() {
$(".imgUpload #imgUpload_btn_file").click();
});
$(".imgUpload #imgUpload_btn_clear").click(function() {
$(".imgUpload #imgUpload_img").attr('src', '');
$(".imgUpload #imgUpload_img").hide();
$('.joe_comment__respond-form .body .text').show();
$(".imgUpload #imgUpload_btn_file").val('');
$(".joe_comment__respond-form .body textarea[name='text']").val('');
});
$(".imgUpload #imgUpload_btn_file").change(function() {
var gs = this.files[0].name.split(".").pop().toLowerCase();
if (gs!="jpg" && gs!="png" && gs!="gif" && gs!= 'jpeg') {
alert("请上传.jpg，.png，.gif，.jpeg格式文件");
return false;
}
//预览图片编码并显示
var reader = new FileReader();
reader.onloadend = function(e) {
dealImage(e.target.result, 200, function(compressImg) {
$(".imgUpload #imgUpload_img").attr('src', compressImg);
$(".joe_comment__respond-form .body textarea[name='text']").val('{!{' + compressImg + '}!} ');
$(".imgUpload #imgUpload_img").show();
$('.joe_comment__respond-form .body .text').hide();
});
}
reader.readAsDataURL(this.files[0]);
});
/**
* 压缩图片
*/
function dealImage(base64, w, callback) {
var newImage = new Image()
//压缩系数0-1之间
var quality = 0.6;
newImage.src = base64;
newImage.setAttribute('crossOrigin', 'Anonymous'); //url为外域时需要
var imgWidth, imgHeight;
var ba = null;
newImage.onload = function () {
imgWidth = this.width;
imgHeight = this.height;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w;
canvas.height = w * imgHeight / imgWidth;
} else {
canvas.height = w;
canvas.width = w * imgWidth / imgHeight;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
quality = 0.6;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
// 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定
while (base64.length / 1024 > 30) {
quality -= 0.01;
base64 = canvas.toDataURL("image/jpeg", quality);
}
// 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
while (base64.length / 1024 < 20) {
quality += 0.001;
base64 = canvas.toDataURL("image/jpeg", quality);
}
var ba = canvas.toDataURL('image/jpeg', quality); //压缩语句
callback(ba);
}
}
});
{/hide}
{/tabs-pane}
{tabs-pane label="代码截图"}
{/tabs-pane}
{/tabs}
四、修改 joe.global.min.js 文件
修改 Joe/assets/js/joe.global.min.js 文件
将原先的 .joe_comment__respond-form .body .text 换成 .joe_comment__respond-form .body .imgUpload ，自行根据图片关键字找到位置
五、引入 custom.js 文件
打开 Joe/public/include.php 文件，添加以下代码
<!--引入自定义模块JS-->
<script src="<?php $this->options->themeUrl('assets/js/custom.js'); ?>"></script>六、修改样式
在第五部的位置再加入以下代码，引入自定义样式表
<!--引入自定义模块CSS-->
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/custom.css'); ?>">然后在 Joe/assets/css 文件夹内新建 custom.css 文件，将以下代码复制进去
.imgUpload .imgUpload_btn {
text-align:right;
margin: -10px 0 10px 0;
}
.imgUpload .imgUpload_btn span {
cursor: pointer;
margin-left: 5px;
}结束
大功告成，返回文章页面刷新试试看吧！
当前页面是本站的「Baidu MIP」版。发表评论请点击：完整版 »