|
 |
| |
คลิก สลับ Type Croppie square circle |
| |
 |
|
|
 |
 |
|
ทำหน้าเพจแยกกันไว้ได้ไหมครับ เช่น หน้าสีเหลี่ยม ก็กำหนด
$type_crop = 1;
$uploadCrop = $('#vanilla-demo').croppie({
viewport: {
width: 250,
height: 250,
type: '<?php if($type_crop == 1){echo "square";}else{echo "circle";} ?>'
},
boundary: {
width: 400,
height: 400
},
showZoomer: true,
enableOrientation: true
});
สร้างปุ่มสลับ ก็เปลี่ยนหน้าเพจพอเปลี่ยนหน้าก็ให้ค่า $type_crop
แต่ถ้าจะเอาแบบไม่สลับหน้า ให้เปลี่ยนตรงนั้นเลย ก็คงต้องประยุกค์ใช้ on click on change เข้าช่วย
แล้วส่งให้มันไปเปลี่ยนค่าของ type ที่ต้องการ ต้องลองเขียนครับ
|
 |
 |
 |
 |
| Date :
2017-03-20 14:57:16 |
By :
apisitp |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ลองล่ะ...ดาวน์โหลด Code มาใหม่ เอาไฟล์นี้ save แล้วลองไป Run ดูครับ
ลอง if else แบบหยาบๆ
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Croppie - a simple javascript image cropper - Foliotek</title>
<meta name="description" content="Croppie is an easy to use javascript image cropper.">
<meta property="og:title" content="Croppie - a javascript image cropper">
<meta property="og:type" content="website">
<meta property="og:url" content="https://foliotek.github.io/Croppie">
<meta property="og:description" content="Croppie is an easy to use javascript image cropper.">
<meta property="og:image" content="https://foliotek.github.io/Croppie/demo/hero.png">
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600,700' rel='stylesheet' type='text/css'>
<link rel="Stylesheet" type="text/css" href="demo/prism.css" />
<link rel="Stylesheet" type="text/css" href="https://foliotek.github.io/Croppie/bower_components/sweetalert/dist/sweetalert.css" />
<link rel="Stylesheet" type="text/css" href="croppie.css" />
<link rel="Stylesheet" type="text/css" href="demo/demo.css" />
<link rel="icon" href="//foliotek.github.io/favico-64.png" />
</head>
<body>
<section class="hero">
<a id="home" name="home"></a>
<div class="container">
<nav>
<ul>
<a href="#options">Usage</a>
<a href="#documentation">Documentation</a>
<a href="#demos">Demos</a>
<a href="#browsers">About</a>
</ul>
</nav>
<div class="grid">
<div class="col-1-2">
<h1>Croppie</h1>
<h2>
Croppie is a fast, easy to use image cropping plugin with tons of configuration options!
</h2>
<div class="buttons">
<a href="https://github.com/foliotek/croppie" class="btn">View on Github</a>
<button class="js-main-image">Get Result</button>
<button id="change" rel="1">change</button>
</div>
</div>
<div class="col-1-2">
<img class="demo-cropper" id="cropper-1" src="demo/demo-1.jpg" style="display: none;" />
</div>
</div>
</div>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="bower_components/jquery/dist/jquery.min.js"><\/script>')</script>
<script src="demo/prism.js"></script>
<script src="https://foliotek.github.io/Croppie/bower_components/sweetalert/dist/sweetalert.min.js"></script>
<script src="croppie.js"></script>
<script src="demo/demo.js"></script>
<script src="https://foliotek.github.io/Croppie/bower_components/exif-js/exif.js"></script>
<script>
//Demo.init();
</script>
<script>
$(function(){
function popupResult(result) {
var html;
if (result.html) {
html = result.html;
}
if (result.src) {
html = '<img src="' + result.src + '" />';
}
swal({
title: '',
html: true,
text: html,
allowOutsideClick: true
});
setTimeout(function(){
$('.sweet-alert').css('margin', function() {
var top = -1 * ($(this).height() / 2),
left = -1 * ($(this).width() / 2);
return top + 'px 0 0 ' + left + 'px';
});
}, 1);
}
var mc = $('#cropper-1');
$('.js-main-image').on('click', function (ev) {
mc.croppie('result', {
type: 'rawcanvas',
// size: { width: 300, height: 300 },
format: 'png'
}).then(function (canvas) {
popupResult({
src: canvas.toDataURL()
});
});
});
$( "#change" ).click(function() {
var rel = $(this).attr('rel');
if(rel==1){
$("#change").attr('rel', '2');
$('#cropper-1').croppie('destroy');
var mc = $('#cropper-1');
mc.croppie({
viewport: {
width: 150,
height: 150,
type: 'circle' //square
},
boundary: {
width: 300,
height: 300
},
});
}else{
$("#change").attr('rel', '1');
$('#cropper-1').croppie('destroy');
var mc = $('#cropper-1');
mc.croppie({
viewport: {
width: 150,
height: 150,
type: 'square' //square
},
boundary: {
width: 300,
height: 300
},
});
}
});
});
</script>
</body>
</html>
|
| |
|
|
| |
| Date :
2017-03-20 16:05:19 |
By :
apisitp |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ได้แล้วคับ พี่Mr.กล้า
ขอบคุณมากๆ คับพี่
|
| |
|
|
| |
| Date :
2017-03-21 10:27:57 |
By :
comfoy |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
รบกวนสอบถามพี่อีกนิดได้ไหมคับ คืออยากให้เวลา Crop เสร็จแล้วให้มันไปแสดงแทนภาพเก่าคับ ไม่อยากให้มัน Download ลงเครื่องอะคับ ไม่ทราบว่าต้องทำอย่างไรคับ
ถ้าพี่ไม่สะดวกขอแนวทางก็ได้คับ
|
| |
|
|
| |
| Date :
2017-03-21 10:59:22 |
By :
comfoy |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ได้แล้วคับพี่
<img id="Showimage" src="">
vanilla.bind('dac.jpg').then(function() {
vanilla.result('canvas','original').then(function (src)
{
$('#Showimage').attr('src', src);
});
});
|
| |
|
|
| |
| Date :
2017-03-21 11:59:34 |
By :
comfoy |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
อย่าลืมไปปรับแก้ ให้ code มันดู สั้นๆ
หรือให้มันคุมการเปลี่ยนค่าได้ เฉพาะตรง square กับ circle ได้จะแจ่มเลยครับ
อันนี้มันดิบ เกินไป ลองปรับเปลี่ยนดูครับ
|
ประวัติการแก้ไข
2017-03-21 12:17:30
| |
|
|
| |
| Date :
2017-03-21 12:15:28 |
By :
apisitp |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณคับพี่
|
| |
|
|
| |
| Date :
2017-03-21 13:34:36 |
By :
comfoy |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 00
|
